Can't bind nested form group to form array in reactive Forms?

Question

https://stackblitz.com/edit/angular-reactive-forms-eg-s1v5zs?file=src/app/app.component.html

Could not bind {form control} to data [ { "group1": "", "group2": { "data": "" } } ]

Need to bind using form control name


 <form [formGroup]="formGroup">
    <div formArrayName="features">
        <div class="row no-gutters form-group" *ngFor="let feature of features.controls; let i = index; let last = last"
            [formGroupName]="i">
            Grp:1 <input
        type="text"
        class="form-control px-2 col"
        formControlName="group1"
        title="feature"
        >
            <!-- //How to bind  value of data in html??? -->
            <div [formGroup]="group2">
                <input type="text"
                class="form-control px-2 col"
                formControlName="group2"
                title="feature"
                >
            </div>
            <button class="col btn btn-success" (click)="addFeature()">
                +
                </button>
        </div>
    </div>
    <pre>
    {{ features.value|json}}
  </pre>
</form>

typeScript
  constructor(private fb: FormBuilder) {
    this.addFeature();
  }
  formGroup = this.fb.group({
    features: this.fb.array([])
  });
  get features(): FormArray {
    return this.formGroup.get("features") as FormArray;
  }
  addFeature(): void {
    let data = this.fb.group({
      group1: new FormControl("grp_1"),
      group2: this.fb.group({
        data: new FormControl("grp_2")
      })
    });
    this.features.push(data);
  }`enter code here`

Matt U · Accepted Answer · 2019-12-18 15:02:44Z

1

You have formControlName="group2" on your text <input>. Instead, you should bind the data control of the group2 form group to the input: formControlName="data".

answered Dec 18, 2019 at 15:02

Matt U

5,12812 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Krishnakumar Over a year ago

This is a sample object "group2" ,In Real time :I have n number of object inside ("group2") to bind under this nested formgroup data ,name ,id etc... is there any way..?

Chellappan வ · Accepted Answer · 2019-12-18 18:24:01Z

0

If you want to create nested form with array of object then you should use FormGrop.

Try this:

addFeature(): void {
    let data = this.fb.group({
      group1: new FormControl("grp_1"),
      group2: this.fb.group({
        data: new FormControl("grp_2")
      }),
      group3: this.fb.array([
        this.fb.group({
          data: new FormControl("grp_3")
        })
      ])
    });
    this.features.push(data);
  }

Forked Example

answered Dec 18, 2019 at 18:24

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

4 Comments

Rahul Krishnakumar Over a year ago

Yeah , IN Form Array->Form Array->formControl we can bind in html but not able to bind Form Array(Features)->Form group(group2)->FormGroup(data) in HTML ie nested formgroup in formarray cannot bind in html Please do help??

Chellappan வ Over a year ago

Can you create example stackblitz?

Rahul Krishnakumar Over a year ago

Please follow this link ---> stackblitz.com/edit/…

Chellappan வ Over a year ago

Check this:stackblitz.com/edit/angular-reactive-forms-eg-kgijm5

Collectives™ on Stack Overflow

Can't bind nested form group to form array in reactive Forms?

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related