typescript - FormArray dentro de FormArray en Angular 4
Estoy tratando de implementar un FormArray dentro de otro FormArray, pero no funciona, también intenté lo siguiente pero no funciona.
¿Cómo obtener FormArrayName cuando el FormArray está anidado en otro FormArray?
¿Alguien podría ayudarme por favor dónde estoy equivocándome en el siguiente código?
HTML
<div [formGroup]="MainFormGroup" class="custom-auto-complete">
<mat-radio-group matInput formControlName="Applies">
<mat-radio-button *ngFor="let applie of applies" [value]="applie.id">{{applie.value}}</mat-radio-button>
</mat-radio-group>
<div formArrayName="FormArrayOne">
<div *ngFor="let mains of MainFormGroup.get('FormArrayOne')['controls']; let i=index">
<div [formGroupName]="i">
<mat-icon *ngIf="MainFormGroup.get('FormArrayOne').length > 1" (click)="removeMarket(i)">remove_circle</mat-icon>
<mat-icon (click)="addOne()"> add_circle</mat-icon>
<mat-form-field>
<input matInput formControlName="OneField" value="">
</mat-form-field>
<div formArrayName="FormArrayTwo">
<div *ngFor="let Market of MainFormGroup.get('FormArrayTwo')['controls']; let j=index" >
<div [formGroupName]="j">
<mat-form-field class="formfieldsControl">
<input matInput formControlName="Destination">
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
TS
public ngOnInit() {
this.MaintFormGroup = this._fb.group({
Applies : '',
FormArrayOne: this._fb.array([
this.initArrayOne(),
])
});
}
public initArrayOne() {
return this._fb.group({
OneField: '',
FormArrayTwo : this._fb.array([
this.initFormArrayTwo()
])
});
}
public addMarket() {
const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
control.push(this.initArrayOne());
}
public removeMarket(i: number) {
const control = <FormArray> this.MaintFormGroup.get('FormArrayOne');
control.removeAt(i);
}
public initFormArrayTwo() {
return this._fb.group({
Destination : ''
});
}
public addFormArrayTwo() {
const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
Control.push(this.initFormArrayTwo());
}
public removeFormArrayTwo(j: number) {
const Control = <FormArray> this.MaintFormGroup.get('FormArrayTwo');
Control.removeAt(j);
}
Respuesta #1
Este enlace es más bien un resumen del problema, pero puedes echar un vistazo a este proyecto que creé en Stackblitz, que tiene formularios profundamente anidados.