angular2-forms - 多嵌套模型驱动形式 angular 2

Question

我正在使用 ionic 2 angular 2。我想知道如何在 html 模板中创建多嵌套表单组。

例如：

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

如何根据这个FormGroup 设置 HTML 模板。

Answer 1

您可以像下面这样设置 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>

我不知道离子控件，我在角度 2 中回答。您可以在离子 2 中使用相同的格式。这是 plunkr https://plnkr.co/edit/SMCAMddPNmEyHuVS0IK8?p=preview