Angular FormBuilder multiple FormGroups

问题:

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>

回答1:

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