在Angular 5中,可以使用FormGroup和FormArray来创建嵌套表单。
首先,需要导入FormGroup和FormBuilder类:
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
然后,在组件类中创建一个FormGroup的实例,并使用FormBuilder初始化它:
export class MyComponent {
nestedForm: FormGroup;
constructor(private fb: FormBuilder) {
this.nestedForm = this.fb.group({
// 嵌套表单控件的初始化
});
}
}
接下来,可以使用FormGroup的实例来定义嵌套表单的控件和验证规则。例如,可以在嵌套表单中添加一个名为'firstName'的控件:
this.nestedForm = this.fb.group({
firstName: ['', Validators.required],
// 其他控件...
});
在模板中,可以使用formGroup指令将FormGroup绑定到form元素上:
接下来,可以在form元素内部使用formControlName指令将FormGroup中的控件绑定到相应的HTML元素上。例如,可以将'firstName'控件绑定到一个input元素上:
此外,如果需要使用FormArray来创建动态的嵌套表单控件,可以使用FormBuilder的array方法。例如,可以创建一个名为'addresses'的FormArray:
this.nestedForm = this.fb.group({
addresses: this.fb.array([])
});
然后,可以使用FormArray的push方法向'addresses'中添加动态控件:
get addresses() {
return this.nestedForm.get('addresses') as FormArray;
}
addAddress() {
this.addresses.push(this.fb.group({
street: ['', Validators.required],
city: ['', Validators.required],
state: ['', Validators.required]
}));
}
在模板中,可以使用formArrayName指令将FormArray绑定到HTML元素上:
然后,可以在ngFor循环中使用formGroupName指令将每个动态控件绑定到HTML元素上:
通过以上步骤,您就可以在Angular 5中创建嵌套表单了。请根据您的需求添加其他控件和验证规则。