angular reactive form control problem with array of object

Question

here is my JSON

[{
"id": 138,
"first_name": "John",
"last_name": "Doe",
"phone": [{
    "label": "home",
    "value": 546345
}, {
    "label": "wife",
    "value": 63456345
}]
}]

I need to make edit form when I click on edit show input field. I get everything to work, but for the phone number I get a problem, I can not get input for all object in contact_phone, only for first object.

Here is part of my code

<div formArrayName="phone">
        <div *ngFor="let number of phoneFormGroup.controls; let i = index">
          <div [formGroupName]="i" class="row">
            <div class="col-xl-5 col-md-5 col-sm-12 col-12">
              <input formControlName="value" type="number" placeholder="Number" />
            </div>
            <div class="col-xl-5 col-md-5 col-sm-12 col-10">
              <input formControlName="label" type="text" placeholder="Label" />
            </div>
            <div class="col-xl-2 col-md-2 col-sm-12 col-2 newContactInputTitle">
              <div class="removeNumber" (click)="removeNumber(i)"><i class="fa fa-times"></i></div>
            </div>
          </div>
        </div>
        <div class="addNumber d-flex h-100r" (click)="addNumber()"><i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>Add number</div>
      </div>

Answer 1

In your createContactNumber method in the for loop you are returning only the first object from the list.

if (this.contact.contact_phone) {
      for (let i = 0; i < this.contact.contact_phone.length; i++) {
        return this.formBuilder.group({
          label: [this.contact.contact_phone[i].label],
          value: [this.contact.contact_phone[i].value]
        });
      }
    } else {
      return this.formBuilder.group({
        label: [""],
        value: [""]
      });
    }

I have made some changes. First your createContactNumber I renamed to getContactNumbersAsFormGroups which returns list of FormGroups.

private getContactNumbersAsFormGroups(): FormGroup[] {
    //check if user phone number exist, if yes show them in input, if not show empty input
    let inputs: FormGroup[] = []
    if (this.contact.contact_phone) {
      for (let i = 0; i < this.contact.contact_phone.length; i++) {
        inputs.push(this.formBuilder.group({
          label: [this.contact.contact_phone[i].label],
          value: [this.contact.contact_phone[i].value]
        }));
      }
    } else {
      inputs.push(this.getEmptyContactNumberForm());
    }
    return inputs;
}

The method getEmptyContactNumberForm returns just empty form.

private getEmptyContactNumberForm(): FormGroup {
    return this.formBuilder.group({
        label: [""],
        value: [""]
    });
}

The next change is in your addContactNumber method

this.contactList.push(this.getEmptyContactNumberForm());

And finally in the method ngOnInit

ngOnInit() {
   ...

   contact_phone: this.formBuilder.array(this.getContactNumbersAsFormGroups());

   ...
}

Answer 2

In here <div *ngFor="let contact of contactFormGroup.controls; let i = index"> you are setting contact.

But in your inputs you are referencing controls:

<input formControlName="controls.number" type="number" placeholder="Number" />

<input formControlName="controls.value" type="text" placeholder="Label" />

---

Try changing to formControlName="contact.number" and formControlName="contact.value"

---

*It also looks like you should be referencing contact.label and not contact.number since that is what is in your contact_phone object array