無法將值修補到 angular 中的 formArray

Question

我是 angular 的新手，我只是想將值修補到我的 formArray。

這是我的代碼。 我已經嘗試過，但它不起作用：

主頁.html

<ion-list formArrayName="belt_array">
        <div *ngFor="let obj of form.controls.belt_array.controls;let i=index">
            <ion-row [formGroupName]="i">
                <ion-col class="pl-0">
                    <ion-item>
                        <ion-input type="text" formControlName="data"></ion-input>
                    </ion-item>
                </ion-col>
            </ion-row>
        </div>
    </ion-list>

主頁.ts

ngOnInit(){
   this.formParamsForm = this._fb.group({
      belt_array: this._fb.array([], Validators.minLength(1))
   });
}

loadData(){
      this.formParamsForm.setControl('belt_array', this._fb.array(myArr));
}

myArr = [ {“數據”：“a1”}，{“數據”：“a2”}，{“數據”：“a3”}]；

我正在調用 loadData() 的按鈕的 Onclick 但我的應用程序沒有加載 myArr 的數據。

我的錯誤在哪里，有人可以幫助我嗎？

先感謝您！

Answer 1

由於 myArr 是 object 的數組，我們需要創建 formGroup 的數組。

 const arrOfFormGroup =  myArr.map(arr=>(this.fb.group({data:arr.data})));

當我們使用 setControl 方法時，我們應該調用updateValueAndValidity 。 更新 formGroup 的值和有效性

loadData(){
  this.formParamsForm.setControl('belt_array', this._fb.array(arrOfFormGroup)); 
  this.formParamsForm.updateValueAndValidity();
}

或者

我們可以使用 formArray push方法將新控件插入 formArray 而不是 setMethod。

loadData(){ 
     arrOfFormGroup.forEach(arr=>{
       (this.formParamsForm.get('belt_array') as FormArray).push(arr);
      });               
}