角度为 4 的 formArray 内的 Formarray

Question

I am trying to implement formarray inside formarray but its not working, tried below too but doesn't work.

How to get FormArrayName when the FormArray is nested in another FormArray?

could someone please help me where am i doing wrong in below code

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);
}

Answer 1

这个链接更像是一个问题的要点，但你可以看看我在 stackblitz 上创建的这个项目，它有很深的嵌套形式。