在模板中,可以为某个表单控件绑定一个属性,通过该属性来判断是否需要该控件来验证表单。则可以在该控件绑定的属性值为false时将该控件禁用。但是如果该控件是必填项,即使禁用了该控件,表单仍然被视为有效,这显然不是我们想要的结果。解决方法是,需要在该控件禁用时手动设置该控件的值为空,即使用户在表单中没有输入任何内容,也要手动设置该控件的值为空。示例代码如下:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
enableMyControl: new FormControl(true),
myControl: new FormControl('', Validators.required),
});
}
toggleControl() {
const control = this.form.controls['enableMyControl'];
control.setValue(!control.value);
if (!control.value) {
this.form.controls['myControl'].setValue('');
}
}
}