在Angular TypedForms中,我们可以使用FormControl来跟踪表单控件的状态和值。有时,在表单中存在一些可选字段,当用户不想填写该字段时,我们不希望这个字段的值影响到整个表单。这就是所谓的“可选表单控件”。
以下是一个包含可选表单控件的示例,其中“address2”是可选的字段:
在组件.ts文件中:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
`
})
export class FormComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.myForm = this.fb.group({
name: '',
address1: '',
address2: null,
city: ''
});
}
onSubmit() {
console.log(this.myForm.value);
}
}
在上面的代码中,我们通过将“address2”设置为null来标记其为可选字段。在组件的模板中,我们使用FormControlName将其绑定到表单中。
这样,当表单提交时,只有填写了“address2”的用户的值才会被提交。如果“address2”没有填写,则该字段的值为null,不会影响整个表单的提交。