要使用Angular嵌套表单,可以按照以下步骤操作:
formGroup
指令来创建一个表单组,并将其与父组件的表单模型关联起来。例如:
parentForm
属性来表示父组件的表单模型,并使用FormGroup
类来初始化它。同时,还需要在父组件的构造函数中初始化嵌套表单的表单模型。例如:import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-parent-component',
templateUrl: './parent-component.component.html',
styleUrls: ['./parent-component.component.css']
})
export class ParentComponent implements OnInit {
parentForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.parentForm = this.formBuilder.group({
nestedForm: this.formBuilder.group({
nestedControl: ['']
})
});
}
}
formGroupName
指令来指定嵌套表单的表单组,并使用formControlName
指令来指定嵌套表单中的控件。例如,上面的示例中的input
元素与嵌套表单中的nestedControl
控件进行了绑定。这样,就完成了Angular嵌套表单的创建和绑定。可以在父组件中访问嵌套表单的值,并进行其他操作。