I've been working on implementing a FormArray inside another FormArray, but it doesn't seem to be functioning correctly. I also tried the solution provided in the link below, but it didn't work for me.
How to get FormArrayName when the FormArray is nested in another FormArray?
Could someone please assist me in identifying what I might be doing wrong in the code snippet below?
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);
}