Angular Nested Form

Question

I'm trying to have a nested reactive form.

When I try to display a nested array I get an error "Cannot find control with path: 'contact -> phone -> 0 -> number'"

This is my payload

     {
          "_id": "5ddb9fa8545eb65b5b28a471",
          "contact": {
            "addressLocation": {
              "apartment": "34",
              "balding": "43",
              "street": "some street"
            },
            "iconImage": "",
            "mail": "[email protected]",
            "phone": [
              {
                "name": "ABC",
                "number": "0548888888"
              }
            ]
          },
          "content": "some content",
          "title": "some title",
          "type": "regular",
          "userId": "5d96545b7d84d2201abc879",
          "updatedAt": "2019-11-25T09:32:24.886Z"
        }

This is my HTML

      <form [formGroup]="formC" (ngSubmit)="onSubmit()">

            <div [formGroupName]="'contact'">

                <div [formGroupName]="'addressLocation'">
                    <input type="text" class="form-control" [formControlName]="'apartment'">
                    <input type="text" class="form-control" [formControlName]="'balding'" >
                    <input type="text" class="form-control" [formControlName]="'street'">
      </div>

                    <input type="text" class="form-control" [formControlName]="'iconImage'" >
                    <input type="text" class="form-control" [formControlName]="'mail'">


                    <div [formArrayName]="'phone'">
                        <ul class="subjectList">
                            <li *ngFor="let item of phoneFormArray.controls; let i = index">

                                <div [formGroupName]="i">
                                    <input type="text" class="form-control" [formControlName]="'name'">
                                    <input type="text" class="form-control" [formControlName]="'number'">
              </div>
                            </li>
                        </ul>
                    </div>
                </div>

        </form>

And here it a live Demo

What am i missing?

Thanks

Answer 1

when working with form arrays, you need to set their value by actually creating form groups and pushing them into your array:

  constructor(public fb: FormBuilder) {
     this.formC.patchValue(this.data);
     this.data.contact.phone.forEach(p => this.addPhone(p))
  }

  addPhone(p) {
    const fg = this.blankPhoneFg
    fg.setValue(p)
    this.phoneFormArray.push(fg)
  }

  get blankPhoneFg() {
    return this.fb.group({
      name: ['', Validators.required],
      number: ['', Validators.required],
    })
  }

also initialize your array empty:

phone: this.fb.array([]),

if you want to initialize it with an empty group, you need to make sure you put an actual group in it and not an object:

phone: this.fb.array([this.blankPhoneFg]),

fixed blitz: https://stackblitz.com/edit/nested-forms-angular-wool3t?file=src/app/app.component.ts

you may need to do something like add an empty group at the end or if no phone or something, whatever your needs require