Angular2 doesnot support nested properties in form

Question

Any way to support nested fields in Angular2.

Class

ngOnInit() {
 this.form = this._fb.group({

  name: {
    given: ['', Validators.required],
    middle: [''],
    family: ['', Validators.required]
  }

 });
}

Template

<form [ngFormModel]="form">

<input ngControl="name.given" type="text" placeholder="First Name">
<input ngControl="name.middle" type="text" placeholder="Middle Name">
<input ngControl="name.family" type="text" placeholder="Last Name">

</form>

I'm getting following Cannot find control 'name.given' error output in console. I've tried some other syntax name['given'], name[given] etc against ngControl but getting the same kind of error.

How do you work with nested fields in angular2 ?

And here is the answer.

Lekhnath
– Lekhnath

2016-06-13 08:23:08 +00:00
Commented Jun 13, 2016 at 8:23 — Lekhnath
– Lekhnath, Commented Jun 13, 2016 at 8:23

Thierry Templier · Accepted Answer · 2016-06-13 07:49:48Z

2

You fix inline form (with ngControl) and programmatic form with FormBuilder - in this case, you need to use ngFormControl).

I think that you're looking for form groups. Here is a sample:

<div ngControlGroup="name" #cgName="ngForm">
  <p>First: <input ngControl="give" required></p>
  <p>Middle: <input ngControl="middle"></p>
  <p>Last: <input ngControl="family" required></p>
</div>

See this plunkr: https://plnkr.co/edit/M4FGTNAx8lo8jzBivH0P?p=preview.

edited Jun 13, 2016 at 7:49

answered Jun 13, 2016 at 7:38

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

5 Comments

Lekhnath Over a year ago

Now I am getting Cannot find control 'name -> given' error message in console.

Thierry Templier Over a year ago

Perhaps you forgot the form element. I added a plunkr in my answer ;-)

Lekhnath Over a year ago

Its not working with [ngFormModel] here

Thierry Templier Over a year ago

Yes it's normal because you can't mix inline forms with ones defined with FormBuilder... Note that you can define groups with FormBuilder as well. Here is a sample: angular.io/docs/ts/latest/api/common/index/….

kirqe Over a year ago

@ThierryTemplier, can you update your answer to rc5 requirements?

Collectives™ on Stack Overflow

Angular2 doesnot support nested properties in form

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related