How to populate Array values in angular9 template using forms

Question

.html page

<pre>
<div *ngFor="let data of data;let i=index" class="row_wrap">
<div class="row_inner_wrap">
<div class="row">
<div class="col-md-12">
<div class="col-md-5 inner_row">
<mat-form-field appearance="outline" class="input-container">
<input  (click)="readonly($event)" formControlName="status" matInput [value]="data?.employeeStatus" class="form-control" placeholder="{{ 'Status'| translate }}" readonly>
</mat-form-field>
<i class="fa fa-check edit_dept" data-uuid="" data-type="department"></i>
</div>
<div class="col-md-6 inner_row b4_del_header">
<mat-form-field appearance="outline" class="input-container">
<input matInput placeholder="{{ 'description'| translate }}" formControlName="description" (click)="readonly($event)"  [value]=" data?.description" class="form-control" readonly>
</mat-form-field>
<div class="add_des_edit">
<div class="update_icon">
<i class="fa fa-check edit_dept" data-uuid="" data-type="department"></i>
</div>
</div>
</div>
<div *ngIf="!enableEdit" class="del_icon" (click)="ondelete(data?._id)">
<i class="fa fa-trash-o del del_department" aria-hidden="true" style="visibility: visible;" data-uuid=""></i>
</div>
<div class="add_icon"  style="display: none"><i class="fa fa-plus add_row" data-uuid=""></i>
</div>
<div *ngIf="enableEdit" class="edit_icon" (click)="onUpdate()" style="display: inline-block;">
<i class="fa fa-check edit_row edit_row_department" data-uuid=""></i>
</div>
</div>
 </div>
 </div>
</div>

.component.ts

{

  constructor(private fb: FormBuilder,
     private elRef: ElementRef,
     private settingservice: SettingsService) {
        this.emp_status = this.fb.group({
          status: [],
          description : []
     });
  }

}

How can I populate the array elements in my template? With these codes, I'm getting null fields. while inspecting I'm getting values in the input field even though it showing empty field

Answer 1

a brief explain about FormArrays

If we want an object like

[
{status:'status 1',description:'description 1'},
{status:'status 2',description:'description 2'},
{status:'status 3',description:'description 3'},
   ...
]

We has an array of object, so we need a FormArray of FormGroups (*). To create it's usefull has a function that return a FormGroup (one element of the FormArray)

createGroup():FormGroup
{
   return new FormGroup({
      status:new FormControl(),
      description:new FormControl(),
   })
}

If our FormArray belongs to a FormGroup, it's usefull has a getter function that return our FormArray

form:FormGroup; //<--declare the form
get statusArray():FormArray
{
    return this.form.get('emp_status') as FormArray
}
//in ngOnInit
ngOnInit()
{
    this.form=new FormGroup({
       other_property:new FormControl(),
       emp_status=new FormArray([]) //<--see that we create an empty FormArray
    })
}

If only want the FormArray itself only declare

formArray:FormArray
//in ngOnInit we create the formArray empty -well you can do it in the declaration-
ngOnInit()
{
   this.formArray=new FormArray([]) //<--see that we create an empty FormArray
}

Now we are going to add elements to the array. Remember that each element of the FormArray is a FormGroup, but we has a function that return a formGroup!

So, we can add simply using

this.statusArray.push(this.createGroup()) //if we are using a formArray inside a FormGroup
this.formArray.push(this.createGroup()) //if we has the formarray standalone

If we want add the formArray based in an array, we usually "map" the array to a FormGroup and create the array, puff. Imagine you has an array of data, you can do

   this.form=new FormGroup({
       other_property:new FormControl(),
       emp_status=new FormArray(
         this.data.map(x=>this.createGroup()) //<--each element of this data
                                              //like a formGroup
       )
    })

//or with our standalone FormArray
this.formArray=new FormArray(this.data.map(x=>this.createGroup()))    

Well, to see in.html

First check if it's all ok

<pre>
{{form?.value|json}}
</pre>
//or
<pre>
{{formArray.value|json}}
</pre>

we are using inputs and divs

if is in a FormGroup

<form [formGroup]="form">
   <!--say to Angular we are going to use the formArray using formArrayName-->
   <div formArrayName="emp_status">
       <!--iterate over the controls of formArray and use [formGroupName]-->
        <!--see that we use our getter function-->
     <div *ngFor="let group of statusArray.controls;let i=index" [formGroupName]="i">
          <!--use formControlName, we are yet in a formGroup-->
          <input formControlName="status">
          <input formControlName="description">
     </div>
   </div>
</form>

If the FormArray is standalone there are a problem with the strict mode. before we can use

 /**BEFORE***/
 <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">

Now, we create an auxiliar function

getGroupAt(index)
{
    return this.formArray.at(index) as FormGroup
}

<form [formGroup]="formArray">
     <!--iterate over the controls of formArray and use [formGroup]-->
     <div *ngFor="let group of formArray.controls;let i=index" [formGroup]="getGroupAt(i)">
          <!--use formControlName, we are yet in a formGroup-->
          <input formControlName="status">
          <input formControlName="description">
     </div>
   </div>
</form>

You can see in stackblitz

Updated how populate the array data given

Remember when we write this.formArray=new FormArray(this.data.map(x=>this.createGroup())) ?

What about write

this.formArray=new FormArray(this.data.map(x=>this.createGroup(x))) 

?

Well, change the funciton createGroup for some like

createGroup(data:any=null):FormGroup
    {
       data=data || {status:null,description:null}
       return new FormGroup({
          status:new FormControl(data.status),
          description:new FormControl(data.description),
       })
    }

END

(*) a FormArray can be a FormArray of FormControls if we want to manage only an array of numbers or an array of strings