要在Angular 6模板驱动表单中禁用提交按钮,您可以使用[disabled]
属性来控制按钮的禁用状态。以下是一个示例解决方案:
isFormValid
的变量:export class YourComponent {
isFormValid: boolean = false;
// 其他组件代码
}
ngForm
指令来包裹整个表单,并使用#form
来引用该表单。例如:
required
验证器:
ngAfterViewInit
钩子函数来监听表单的有效性变化,并更新isFormValid
变量。例如:export class YourComponent implements AfterViewInit {
isFormValid: boolean = false;
@ViewChild('form') form: NgForm;
// 其他组件代码
ngAfterViewInit() {
this.form.valueChanges.subscribe(() => {
this.isFormValid = this.form.valid;
});
}
}
这样,当表单有效时,提交按钮将处于可用状态,否则将被禁用。