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>

Stefan Jovanchevski · Accepted Answer · 2019-06-15 09:29:14Z

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());

   ...
}

thank you so much for this.... I rely get problems with understanding reactive forms

blapaz · Accepted Answer · 2019-06-14 21:56:43Z

1

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

answered Jun 14, 2019 at 21:56

blapaz

3342 silver badges12 bronze badges

1 Comment

Arter Over a year ago

thnx, sry this was mistake because i try a different solution, i already try this contact.label and contact.number but still same problem... i edit question

Collectives™ on Stack Overflow

angular reactive form control problem with array of object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related