角FormBuilder多个FormGroups

我有2个FromGroups（用户&地址）角FormBuilder多个FormGroups

我收到以下错误形式：

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的规则？

这里的情况下，它的相关

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

来源

2017-04-19 Shanie

你不需要使单个字段formControls？ – danimal

@danimal据我所知数组的格式与formBuilder.control（）相同 – Shanie

有错字在你的HTML代码的HTML，改变fromGroupName到formGroupName。

来源

2017-04-19 21:14:54 ulubeyn

你说得对。这解决了我的问题 – Shanie

角FormBuilder多个FormGroups

回答

相关问题