角度FormBuilder複数FormGroups

Question

私は次のエラーを取得2 FromGroups（ユーザー&アドレス）

を持つフォームがあります。私はこのクラス

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

を使用する場合

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

を..しかし、入れ子になっているフォームグループのうちの1つを取り出した場合、

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だ、formGroupNameにfromGroupNameを変更します。