Angular2 forms 多嵌套模型驱动形式2

我在用离子2和角2。我想知道如何在html模板中创建多嵌套formgroup

例如：

这是.ts文件中的表单组

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模板。

您可以像下面这样设置HTML模板：

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

地址:
国家：
电话号码：
住宅号码：
主要电子邮件：
辅助电子邮件：

---

“我不知道离子控制，”我在第二节中回答。您可以在ionic 2中使用相同的格式。这是plunkr

现在Tel未定义。vendor.js:1703错误：Uncaught（承诺中）：错误：找不到名为“Tel”的控件包括plunkr。请查收