Returning an array of data using dialog | Angular Community | Page 1

proven sedge Nov 18, 2022, 7:45 PM

#

dialog-insert-ops.component.ts```ts
export class DialogInsertOpsComponent implements OnInit {

//Controles
@ViewChild('opField') messageElement!: ElementRef;

//Fomrulário
form!: FormGroup;

constructor(
private formsService: FormsService,
public dialogRef: MatDialogRef<DialogInsertOpsComponent>,
@Inject(MAT_DIALOG_DATA) public data: IDialogOps
) { }

ngOnInit(): void {
//Dialog com campo de entrada Textarea
if (this.data.withField) {
//Construir form e validação
this.form = new FormGroup({
op: new FormControl(this.data.op, [
Validators.required,
Validators.pattern("^[0-9]*$"),
Validators.maxLength(20),
])
});
}
console.log(this.data.auxCerts);
}

ngAfterViewInit(): void {
//Dialog com campo de entrada Textarea
if (this.data.withField) {
this.formsService.focusDelay(this.messageElement);
}
}

/**

Retorna uma mensagem de erro para o campo Message
@returns string | void
*/
getErrorsMsgField(): string | void {
if (this.form.get('op')?.hasError('required')) {
return 'Campo obrigatório';
} else if (this.form.get('op')?.hasError('maxlength')) {
return 'Limite de caracteres excedido';
} else if (this.form.get('op')?.hasError('pattern')) {
return 'O valor deverá ser numérico';
}
}

/**

Ao enviar o formulário
*/
onSubmit() {
console.log(this.form.get('op')?.value);
// this.dialogRef.close(this.form.get('op')?.value);
}

/**

Confirma a Dialog
*/
confirm() {
this.dialogRef.close(true);
}

}```

#

dialog-insert-ops.component.htmlhtml <h2 mat-dialog-title [class]="data.color">{{ data.title }}</h2> <ng-container *ngIf="data.withField else without_field"> <form [formGroup]="form" (ngSubmit)="onSubmit()"> <mat-dialog-content> <p [innerHTML]="data.subtitle"></p> <mat-form-field appearance="standard" *ngFor="let auxCerts of data.auxCerts; let i = index"> <mat-label>{{ data.label }} <strong>{{auxCerts.numero_cpha}}</strong></mat-label> <input matInput #opField formControlName="op"> <mat-error *ngIf="form.get('op')?.invalid">{{ getErrorsMsgField() }}</mat-error> </mat-form-field> </mat-dialog-content> <mat-dialog-actions align="end"> <button type="button" mat-button [mat-dialog-close]="false" color="accent">{{ data.textClose ?? "Fechar"}}</button> <button type="submit" mat-button [color]="data.color ?? 'primary'" [disabled]="form.invalid">{{ data.textConfirm ?? "Confirmar"}}</button> </mat-dialog-actions> </form> </ng-container> <ng-template #without_field> <mat-dialog-content> <p [innerHTML]="data.subtitle"></p> </mat-dialog-content> <mat-dialog-actions align="end"> <button type="button" mat-button [mat-dialog-close]="false" color="accent">{{ data.textClose ?? "Fechar"}}</button> <button type="button" mat-button [color]="data.color ?? 'primary'" (click)="confirm()">{{ data.textConfirm ?? "Confirmar"}}</button> </mat-dialog-actions> </ng-template>

rapid blaze Nov 18, 2022, 7:47 PM

#

Instead of calling this.dialogRef.close(true), call this.dialogRef.close(theDataIWantToReturn).
https://material.angular.io/components/dialog/overview:

When closing, an optional result value can be provided. This result value is forwarded as the result of the afterClosed Observable

proven sedge Nov 18, 2022, 7:51 PM

#

rapid blaze Instead of calling `this.dialogRef.close(true)`, call `this.dialogRef.close(theD...

Yes, he is just returning me.

How do I do it here:

<mat-form-field appearance="standard" *ngFor="let auxCerts of data.auxCerts; let i = index">
         <mat-label>{{ data.label }} <strong>{{auxCerts.number_cpha}}</strong></mat-label>
         <input matInput #opField formControlName="op">
         <mat-error *ngIf="form.get('op')?.invalid">{{ getErrorsMsgField() }}</mat-error>
 </mat-form-field>```

To get each data? It can be 1 or several inputs. I know I have to send it to an array, but how do I send it using formControlName?

rapid blaze Nov 18, 2022, 7:53 PM

#

https://angular.io/guide/reactive-forms#creating-dynamic-forms

proven sedge Nov 18, 2022, 7:55 PM

#

Thank you!

proven sedge Nov 18, 2022, 8:47 PM

#

I made the change but this error occurs core.mjs:6461 ERROR Error: Cannot find control with path: 'ops -> 1' and does not load all inputs.
Can you tell me what it could be?

rapid blaze Nov 18, 2022, 9:10 PM

#

The message says it all. Your form array doesn't have anything at index 1. So you probably created a form array of only one element, even though you're looping over an array of more than one element. Post the relevant code if you want more than conjectures.

proven sedge Nov 19, 2022, 5:25 PM

#

  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <mat-dialog-content>
      <p [innerHTML]="data.subtitle"></p>
      <div formArrayName="ops">
        <mat-form-field appearance="standard" *ngFor="let auxCerts of data.auxCerts; index as i">
          <mat-label>{{ data.label }} {{auxCerts[1]}}</mat-label>
          <input matInput #opField [formControlName]="i" placeholder="OP">
          <!--mat-error *ngIf="form.get('ops')?.invalid">{{ getErrorsMsgField() }}</mat-error-->
        </mat-form-field>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button type="button" mat-button [mat-dialog-close]="false" color="accent">{{ data.textClose ??
        "Fechar"}}</button>
      <button type="submit" mat-button [color]="data.color ?? 'primary'" [disabled]="form.invalid">{{
        data.textConfirm ?? "Confirmar"}}</button>
    </mat-dialog-actions>
  </form>```

#

my cod👆🏿

rapid blaze Nov 19, 2022, 5:29 PM

#

proven sedge ```html <form [formGroup]="form" (ngSubmit)="onSubmit()"> <mat-dialog-cont...

What matters here is the TypeScript code, which is supposed to create and populate a FormArray. Each element of data.auxCerts must have a corresponding form control in the ops form array.

proven sedge Nov 19, 2022, 5:31 PM

#

Yes. I did it here

#

 ngOnInit(): void {
    //Dialog com campo de entrada Textarea
    if (this.data.withField) {
      //Construir form e validação
      this.form = new FormGroup({
        ops: new FormArray([
          new FormControl(this.data.ops, [
            Validators.required,
            Validators.pattern("^[0-9]*$"),
            Validators.maxLength(20),
          ]),
        ]),
      });
    }
    //console.log(this.data.auxCerts);
  }```

rapid blaze Nov 19, 2022, 5:33 PM

#

That creates a form array with a single form control inside. You need many form controls: one for each element of data.auxCerts. If you need to edit 10 things, you need 10 form controls. Not just 1.

proven sedge Nov 19, 2022, 5:34 PM

#

And how I do it?
Cycling through data.auxCerts with foreach?

rapid blaze Nov 19, 2022, 5:35 PM

#

Yes, for example.

#Returning an array of data using dialog