Angular FormBuilder multiple FormGroups

Question

I have a form with 2 FromGroups (User & 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 take out 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 some rule about not having more than one nested FromGroup??

Here's the html in case it's 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 typo in your html, change fromGroupName to formGroupName.