这通常发生在表单第一次呈现时,因为表单中的所有控件都是初始的ng-valid状态。要解决此问题,我们可以在ngOnInit钩子中检查表单的有效性并更新其状态。
示例代码:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example-form',
templateUrl: './example-form.component.html',
styleUrls: ['./example-form.component.css']
})
export class ExampleFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.required],
phone: ['', Validators.required]
});
this.form.statusChanges.subscribe(status => {
if (status === 'VALID') {
this.form.enable(); // enable the form
}
});
}
submit() {
console.log('Form submitted!');
}
}
在这个示例中,我们在ngOnInit中构建了一个表单,并在其状态进行更改时订阅了状态更改事件。 如果表单有效,则将表单启用。
这个解决方法会使表单一旦所有控件都是有效的,就会启用提交按钮。