无法将值修补到 angular 中的 formArray

Question

I am new to angular, I simply want to patch value to my formArray.

Here is my code. I have tried but it's not working:

home.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>

home.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 = [ { "data": "a1" }, { "data": "a2" }, { "data": "a3" } ];

Onclick of the button I am calling loadData() but my app doesn't load data of myArr.

Where is my mistake, can anyone help me?

Thank you in advance!

Answer 1

Since myArr is array of object we need to create array of formGroup.

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

When we use setControl method we should call updateValueAndValidity . to update the value and validity of formGroup

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

OR

We could use formArray push method to insert new control to formArray instead of setMethod.

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