角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的規則？

這裏的情況下，它的相關

<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代碼的HTML，改變fromGroupName到formGroupName。