無法在angular6中使用addControl（）多次添加同一數組

Question

這是我的傑森：

{"id":"","title":"","areas":[{"areaId":"","type":"","position":"","parts":[]}]}

現在，我想根據用戶的請求添加areas[]數組，當我使用不同的名稱時，每次插入該數組時，都要添加它。 例如 ：

{"id":"","title":"","areas":[{"areaId":"","type":"","position":"","parts":[]}],"areas2":[{"areaId":"","type":"","position":"","parts":[]}],"areas3":[{"areaId":"","type":"","position":"","parts":[]}]}

每次我希望Arary的名稱僅是區域。

這是我添加數組的代碼：

let areas = new FormArray([
    new FormGroup({
        areaId : new FormControl(''),
        type : new FormControl(''),
        position : new FormControl(''),
        parts : new FormArray([])
    })
]); 

this.form.addControl('areas', areas);

Answer 1

您每次都在創建新的表單數組。 您應該在此處推動添加新的表單控件。

const formGroup= new FormGroup({
        areaId : new FormControl(''),
        type : new FormControl(''),
        position : new FormControl(''),
        parts : new FormArray([])
    })

areas.push(formGroup);

Answer 2

您可以使用get創建formArray實例並在其中推送新控件

像這樣，

在.ts

 formGropup = this.formBuilder({
      areas : this.formBuilder.array([])
    })

/*Initlaize formArray*/
    get areaCollection(): FormArray {
        return this.pecRegForm.get('areas') as FormArray;
    };

 /*Initlaize formcontrols*/
    createArea(): FormGroup {
        return this.fb.group({
            areaId : new FormControl(''),
            type : new FormControl(''),
            position : new FormControl(''),
            parts : new FormArray([])
        });
    }

    /* Here you can push new formGroup*/
    addMoreAreas() {
        this.censusCollection.push(this.createArea());
    }

在.html

<div class="col-md-4" *ngFor="let item of formGropup.get('areas').controls; let i = index;" [formGroupName]="i">
   <input formControlName="areas" type="text" placeholder="Id"> 
   <input formControlName="type" type="text" placeholder="Id">  
   <!-- and so on -->                           
</div>