Why FormArrayGroup is throwing an error when it is used with nested form group in Angular?

  angular, angular-reactive-forms

I have a form group like the following:

this.addressInfoForm = new FormGroup({
      addressLine1: new FormControl("", [Validators.required]),
      addressLine2: new FormControl("", []),
      city: new FormControl("", [Validators.required]),
      province: new FormControl("", []),
      postalCode: new FormControl("", [Validators.required]),
      country: new FormControl({ value: "", disabled: true }, [
        Validators.required
      ]),
      stuff: new FormGroup({
        x1: new FormControl("x1"),
        x2: new FormControl("x2")
      }),
      email: new FormControl("", [Validators.email]),
      phones: this.fb.array([
        this.fb.group({
          phoneNumber: "",
          phoneType: ""
        })
      ])
    });

I don’t know why my formArrayGroup is not rendering the phones and throwing the error

ERROR
Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).

I created an example on stackblitz here

If you deleted the html part of the FormArray, the app will work.. if you deleted the html part of the nested group, the app would work.. it almost made me think that a nested form group and form array can’t be used together!?

As you can see, it detects that there are 2 phones in my array and the form builder is rendering this as expected.. for some reason I can’t figure this out!!

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.