Angular FormBuilder多个FormGroups [英] Angular FormBuilder multiple FormGroups

问题描述

我有一个带有2个发件人组(用户和地址)的表单

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

我收到以下错误:

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

...但是，如果我取出其中一个嵌套的FormGroup，如

...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]

            });
        }
    }

错误消失.

是否有关于不存在多个嵌套的FromGroup的规则?

Is there some rule about not having more than one nested FromGroup??

以下是相关的

 <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>

推荐答案

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

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

这篇关于Angular FormBuilder多个FormGroups的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！