각도 4의 formArray 내부의 FormArray

Question

formarray를 formarray 내부에 구현하려하지만 작동하지 않습니다. 아래에서도 시도했지만 작동하지 않습니다. 나는 아래의 코드를 잘못하고있는 중이 야 어디

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

누군가 나를 도와주세요 수

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

This link이 문제의 핵심이지만 더 깊이 중첩 된 형태를 가진 stackblitz에서 만든이 프로젝트를 살펴볼 수 있습니다.