可以使用FormGroup和FormControl来创建嵌套表单控件。下面是一个示例,其中使用了FormGroup和FormControl来创建一个地址表单,其中包含名称,街道,城市和邮政编码:
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-address-form',
template: `
`,
})
export class AddressFormComponent {
addressForm = new FormGroup({
name: new FormControl(''),
street: new FormGroup({
line1: new FormControl(''),
line2: new FormControl('')
}),
city: new FormControl(''),
state: new FormControl(''),
zip: new FormControl('')
});
}
在该示例中,我们创建了一个FormGroup,并将其分为名称,街道,城市,州/省份和邮政编码。街道字段实际上是另一个FormGroup,包含两个控件:line1和line2。
我们在模板中使用formGroup和formGroupName指令来将组件中的所有控件与表单绑定。我们使用formControlName指令将每个FormControl与