在Angular中,可以使用ReactiveFormsModule
来创建反应式表单。要同时在更改和失焦时进行验证,可以使用valueChanges
和blur
事件。
首先,需要引入ReactiveFormsModule
并在模块中导入FormsModule
和ReactiveFormsModule
:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
],
// ...
})
export class AppModule { }
然后,在组件中创建一个反应式表单并定义表单控件和验证规则。在这个示例中,假设有一个名为username
的表单控件,需要对其进行必填和最小长度为3的验证:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(3)]]
});
}
}
在模板中,使用formGroup
指令将表单绑定到myForm
属性。然后,在input
元素中使用formControlName
指令将控件绑定到表单控件。
通过检查控件的invalid
属性和dirty
或touched
属性,可以在更改和失焦时显示验证错误消息。
注意:在模板中使用myForm.controls.username.errors
来访问特定控件的错误对象,并根据具体的验证规则显示相应的错误消息。
这样,当用户在输入框中输入或失焦时,将同时进行验证并显示相应的错误消息。