Basicamente tenho dois arrays, e gostaria de salvar o valor deles ao mesmo tempo no *ngFor
, fiz apenas como teste algo desta forma:
<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
<mat-form-field appearance="standard" class="fullSize">
<mat-label>Titulo</mat-label>
<input [formControlName]="i" type="text" matInput id="field_{{i}}" autocomplete="off"
placeholder="Titulo">
</mat-form-field>
</div>
<div formArrayName="alternativeFieldsValues" *ngFor="let value of alternativeFieldsValues.controls; let i = index">
<mat-form-field appearance="standard" class="fullSize">
<mat-label>Conteúdo</mat-label>
<input [formControlName]="i" type="text" matInput id="value_{{i}}" autocomplete="off"
placeholder="Conteúdo deste campo">
</mat-form-field>
</div>
e tenho essa função que coloca esses campos no HTML
addAlternativeField() {
this.alternativeFields.push(this.fbuilder.control(''));
this.alternativeFieldsValues.push(this.fbuilder.control(''));
}
o problema obvio é que a tupla TITULO/VALOR que era o que eu queria não vai ficar correta, na primeiro execução iria ficar algo assim:
Porém ao chamar novamente essa função, o resultado será este:
Gostaria de saber como manter o formato desejado(TITULO/CONTEUDO) sem ocorrer esse problema, visto que não encontrei uma forma de manusear os vetores num mesmo *ngFor
Visto o comentário de @cezar fiz algo deste tipo:
<div formArrayName="alternativeFields" *ngFor="let field of alternativeFields.controls; let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="standard" class="fullSize">
<mat-label>Titulo</mat-label>
<input formControlName="alternativeFields" type="text" matInput autocomplete="off"
placeholder="Titulo">
</mat-form-field>
<mat-form-field appearance="standard" class="fullSize">
<mat-label>Conteúdo</mat-label>
<input formControlName="alternativeFieldsValues" type="text" matInput autocomplete="off"
placeholder="Conteúdo deste campo">
</mat-form-field>
</div>
</div>
Porém tenho o seguinte erro no console:
ERROR Error: Cannot find control with path: 'alternativeFields -> 0 -> alternativeFields'
at _throwError (forms.js:2144)
at setUpControl (forms.js:2052)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
at checkAndUpdateDirectiveInline (core.js:22095)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)
Aparentemente ele diz que não está definido no form, o que na realidade está:
this.form = this.fbuilder.group({
index: [''],
id: [''],
name: ['', Validators.required],
value: ['', Validators.required],
title: ['', Validators.required],
description: [''],
alternativeFields: this.fbuilder.array([]),
alternativeFieldsValues: this.fbuilder.array([])
});
Alguma dica?