マルチネストされたモデル駆動型フォーム2

Question

角度。例えば

：

これは.TSファイル私はこのFormGroupに応じてHTMLテンプレートを設定するにはどうすればよい

HomeAddress: this.formBuilder.group({ 
    Address: ['', Validators.required] 
    HomeAddressDetail: this.formBuilder.group({ 
     Country: ['', Validators.required] 
     Tel: this.formBuilder.group({ 
      PhoneNo: ['', Validators.required], 
      HomeNo: ['', Validators.required] 
     }), 
     Email: this.formBuilder.group({ 
      PrimaryEmail: ['', Validators.required], 
      SecondaryEmail: ['', Validators.required] 
     }) 
    }) 
}); 

でフォームグループです。あなたが怒鳴るようにHTMLテンプレートを設定することができます

Answer 1

：

<form [formGroup]="HomeAddress"> 
    <div>Address: <input type="text" formControlName="Address"></div> 
    <div formGroupName="HomeAddressDetail"> 
     <div>Country: <input type="text" formControlName="Country"></div> 
     <div formGroupName="Tel"> 
       Phone No: <input type="text" formControlName="PhoneNo"> 
       Home No: <input type="text" formControlName="HomeNo"> 
     </div> 
     <div formGroupName="Email"> 
       Primary Email: <input type="text" formControlName="PrimaryEmail"> 
       Secondary Email: <input type="text" formControlName="SecondaryEmail"> 
     </div> 
    </div> 
</form> 

私はイオン性のコントロールを知らないが、私はあなたがここイオン2に同じ形式を使用することができ、角度2で答えたplunkr https://plnkr.co/edit/SMCAMddPNmEyHuVS0IK8?p=preview

です