要实现在离开焦点时才显示表单验证错误,可以使用Angular的表单控件的updateOn
属性。
首先,确保您已经导入了FormsModule
和ReactiveFormsModule
,并在需要使用表单的组件中将它们添加到imports
数组中。
接下来,为每个表单控件添加updateOn
属性,并将其设置为'blur'
,这将使验证错误在离开焦点时才显示。
下面是一个示例组件的代码:
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
});
}
}
在上面的示例中,name
字段具有updateOn
属性,它设置为'blur'
。此外,我们使用了条件语句和表单的touched
和dirty
属性,以便在控件被触摸或修改后才显示验证错误消息。
这样,当用户在输入框中输入并离开焦点时,如果输入无效,将会显示验证错误消息。