Angular FormBuilder multiple FormGroups

Question

我有一个带有2个FromGroups (用户和地址)的表单

我得到以下错误：

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

当我使用这个类时

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]
                })
            });
        }
    }

如果我取出其中一个嵌套的FormGroups，则返回...But

  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]

            });
        }
    }

错误消失。

有关于不能有多个嵌套FromGroup的规则吗？

这是html，以防它相关

 <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

您的html中有拼写错误，请将fromGroupName更改为formGroupName。