adding nested field in angular reactive form

Question

I'm using Angular 6 and have written API in Django.

I have a Profile model serialized under User model.

Using Postman I'm able to save records to Profile like

# JSON
{
    'name': 'John',
    'profile': {
       'about': 'About me string'
    }
}

# or form field
name = 'John'
profile.about = 'About me string'

Now, In Angular application, I am trying to send data in the same format described above to the endpoint. For that, the formGroup is like

this.aboutForm = this.fb.group({
  profile: this.fb.group({
    about: new FormControl('', [
        Validators.required
    ])
  })
});

And when the HTML form be like

<form [formGroup]="aboutForm" (submit)="submit()" #form="ngForm">
    <textarea formControlName="profile.about"></textarea>
</form>

But this is giving error as

error service Error: "Cannot find control with name: 'profile.about'"

dileepkumar jami · Accepted Answer · 2019-02-16 09:08:30Z

2

You should use formGroupName instead of formControlName for nested controls.

Enclose the textarea inside div with formGroupName=profile and then use the formControlName=about for your texarea

edited Feb 16, 2019 at 9:08

answered Feb 16, 2019 at 8:59

dileepkumar jami

2,26516 silver badges16 bronze badges

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

1 Comment

Anuj TBE Over a year ago

what should be the value of formGroupName?

Collectives™ on Stack Overflow

adding nested field in angular reactive form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related