angular populate data with formArray

Question

I am trying to display the formarray values those were added before.

component.ts

this.companyForm = this.fb.group({
   id: [],
   company_details: this.fb.group({
    ----
   }),
   company_ip_addresses: this.fb.array([this.fb.group({
    start_ip: new FormControl(),
    end_ip: new FormControl()
  })]),
});

addItem(): void {
let control = <FormArray>this.companyForm.controls.company_ip_addresses;
control.push(this.fb.group({
  start_ip: new FormControl(),
  end_ip: new FormControl()
}));
}

deletefield(index){
  let control = <FormArray>this.companyForm.controls.company_ip_addresses;
  control.removeAt(index)
}

component.html

<div formArrayName="company_ip_addresses">
          <div *ngFor="let item of companyForm.get('company_ip_addresses').controls; let i=index; let isFirst = first">
            <ng-container [formGroupName]="i">

            <div fxLayout="row wrap" fxLayoutAlign="space-around center">
              <div fxFlex="30">
                <mat-form-field class="example-full-width" class="w-90-p">
                  <input matInput placeholder="START IP" formControlName="start_ip">
                </mat-form-field>
              </div>
              <div fxFlex="30">
                <mat-form-field class="example-full-width" class="w-90-p">
                  <input matInput placeholder="END IP" formControlName="end_ip">
                </mat-form-field>
              </div>

              <div fxFlex="30">
                <div *ngIf="isFirst;then addfield else delete">
                </div>
                <ng-template #addfield>
                  <button mat-icon-button class="text-center" (click)="addItem()">
                    <mat-icon class="font-weight-900">add</mat-icon>
                  </button>
                </ng-template>
                <ng-template #delete>
                  <button mat-icon-button class="text-center" (click)="deletefield(i)">
                    <mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
                  </button>
                </ng-template>
              </div>
            </div>
          </ng-container>
          </div>
        </div>

Response from API for that formArray comes like below:

company_ip_addresses: Array(2)
 0: {id: 1, start_ip: "111.111.111.1", end_ip: "123.123.123.1", created_by: 18, modified_by: 18, …}
 1: {id: 2, start_ip: "111.111.111.2", end_ip: "111.111.111.3", created_by: 18, modified_by: 18, …}

Before PatchValue to form I am binding data like below:

this.companyForm.controls.company_ip_addresses = this.fb.array([new FormControl()]);
  let ip_addresses = this.companyForm.get('company_ip_addresses') as FormArray;
  for (let i = 1; i < this.companyData.viewData.company_ip_addresses.length; i++) {
    //ip_addresses.push(new FormControl(''));
    ip_addresses.push(this.fb.group({
      start_ip: new FormControl(''),
      end_ip: new FormControl('')
    }));
  }

 this.companyForm.patchValue(this.companyData.viewData);

Showing the error as : Cannot find control with path: 'company_ip_addresses -> 0 -> end_ip'

Only the second element is showing in the template but not the first element showing, I want to show all the added elements to be displayed in the template. Any help. I am new to angular

Indragith Indragith · Accepted Answer · 2019-05-06T07:38:56

In Component.ts, add the get statement to the company ip address form array like below:

 get companyIpAddressFormArray() { return (<FormArray>this.companyForm.get('company_ip_addresses')) ; }

Now in HTML, Modify the ngFor statement as

*ngFor="let item of companyIpAddressFormArray.controls"

Hope this will work

angular populate data with formArray

1 Answers