Angular FormBuilder 多个 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，如

  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。