在Angular 8中,通过使用formControlName
指令可以轻松地绑定表单控件到组件中的FormControl对象。如果需要处理嵌套字段,可以使用FormGroup和FormArray来创建嵌套的表单控件。
以下是一个示例,展示了如何在Angular 8中使用formControlName
与嵌套字段:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.myForm = this.formBuilder.group({
name: ['', Validators.required],
address: this.formBuilder.group({
street: ['', Validators.required],
city: ['', Validators.required],
state: ['', Validators.required],
zip: ['', Validators.required]
}),
phoneNumbers: this.formBuilder.array([
this.createPhoneNumberFormGroup()
])
});
}
createPhoneNumberFormGroup(): FormGroup {
return this.formBuilder.group({
type: ['', Validators.required],
number: ['', Validators.required]
});
}
addPhoneNumber() {
const phoneNumbers = this.myForm.get('phoneNumbers') as FormArray;
phoneNumbers.push(this.createPhoneNumberFormGroup());
}
removePhoneNumber(index: number) {
const phoneNumbers = this.myForm.get('phoneNumbers') as FormArray;
phoneNumbers.removeAt(index);
}
submitForm() {
if (this.myForm.valid) {
// 处理提交逻辑
}
}
}
formControlName
来绑定FormControl到表单字段:
在上述示例中,我们创建了一个名为myForm
的FormGroup对象,并在组件的ngOnInit
方法中初始化它。FormGroup对象包含了名为name
的基本FormControl,以及一个名为address
的嵌套FormGroup和一个名为phoneNumbers
的嵌套FormArray。我们使用formControlName
指令将这些表单控件与模板中的输入框进行绑定。
在模板中,我们使用formGroup
指令将整个FormGroup绑定到form元素上,并使用formControlName
指令将每个FormControl绑定到对应的输入框上。对于嵌套的字段,我们使用formGroupName
指令将嵌套的FormGroup绑定到相应的div元素上。
我们还使用*ngFor
指令遍历phoneNumbers
数组中的每个FormGroup