多嵌套模型驱动形式 angular 2

Question

我正在使用 ionic 2 angular 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]
        })
    })
});

如何根据这个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>

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

多嵌套模型驱动形式 angular 2

Multi nested model driven form angular 2

formbuilder

form-control

angular2-forms

formgroups