Angular FormBuilder multiple FormGroups

Question

I have a form with 2 FromGroups (User and Address)

I get the following error:

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find control with name: 'street' 

when i use this class

 export class FormBuilderComp { addUserFrom: FormGroup; constructor( @Inject(FormBuilder) fb: FormBuilder) { this.addUserFrom = fb.group({ userGroup: fb.group({ name: ['', Validators.required], email: ['', Validators.required], phone: ['', Validators.required] }), addressGroup: fb.group({ street: ['', Validators.required], suite: ['', Validators.required], city: ['', Validators.required], zipCode: ['', Validators.required] }) }); } } 

... But if I choose one of the nested formgroups, as in

  export class FormBuilderComp { addUserFrom: FormGroup; constructor( @Inject(FormBuilder) fb: FormBuilder) { this.addUserFrom = fb.group({ userGroup: fb.group({ name: ['', Validators.required], email: ['', Validators.required], phone: ['', Validators.required] }), street: ['', Validators.required], suite: ['', Validators.required], city: ['', Validators.required], zipCode: ['', Validators.required] }); } } 

The error disappears.

Is there a rule that does not have more than one nested FromGroup ??

Here is the html in case it is relevant

  <form [formGroup]="addUserFrom"> <fieldset formGroupName="userGroup"> <legend>User</legend> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" formControlName="name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email" formControlName="email"> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" class="form-control" id="phone" formControlName="phone"> </div> </fieldset> <fieldset fromGroupName="addressGroup"> <legend>Address</legend> <div class="form-group"> <label for="street">Street</label> <input type="text" class="form-control" id="street" formControlName="street"> </div> <div class="form-group"> <label for="suite">Suite</label> <input type="text" class="form-control" id="suite" formControlName="suite"> </div> <div class="form-group"> <label for="city">City</label> <input type="text" class="form-control" id="city" formControlName="city"> </div> <div class="form-group"> <label for="zipCode">Zip Code</label> <input type="text" class="form-control" id="zipCode" formControlName="zipCode"> </div> </fieldset> <button>Submit</button> </form> 

Answer 1

There is a typo in your html, change fromGroupName to formGroupName .