在Angular 7中,可以使用valueChanges
方法来监听模型属性的变化,并重新验证控件。以下是一个示例:
首先,在组件的构造函数中注入FormBuilder
,并使用它来创建一个表单组。
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent {
myForm: FormGroup;
nameControl: FormControl;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]]
});
this.nameControl = this.myForm.get('name') as FormControl;
this.nameControl.valueChanges.subscribe(() => {
if (this.nameControl.invalid) {
this.nameControl.markAsTouched();
}
});
}
}
在上面的示例中,我们创建了一个名为myForm
的表单组,并在name
控件上应用了必填和最小长度验证器。然后,我们获取到name
控件,并订阅其valueChanges
事件。每当name
控件的值发生变化时,我们检查控件是否无效,并将其标记为已触摸。
在模板中,我们使用nameControl
来获取name
控件,并根据其状态来显示错误消息。