在Angular 10中,可以通过使用ReactiveFormsModule
来创建响应式表单,并且可以使用Validators
类来进行表单验证。要在失焦和提交时同时生效,可以结合使用formControl
的updateOn
属性和formGroup
的submit
事件来实现。
以下是一个示例:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.myForm = this.formBuilder.group({
name: ['', Validators.required]
}, { updateOn: 'blur' }); // 设置updateOn属性为'blur'
}
onSubmit(): void {
// 提交表单的逻辑
}
validateField(field: string): void {
const control = this.myForm.get(field);
control.markAsTouched(); // 标记字段为已触摸,这样验证错误消息才会显示
}
isFieldInvalid(field: string): boolean {
const control = this.myForm.get(field);
return control.invalid && control.touched;
}
}
在上述示例中,myForm
是一个FormGroup
对象,其中包含一个名为name
的表单控件。name
字段使用Validators.required
验证规则进行验证。
在组件的ngOnInit
方法中,我们使用formBuilder
创建了一个响应式表单,并且通过设置updateOn
属性为blur
来指示在失焦时更新表单控件的值。
在HTML模板中,我们使用formControlName
指令将表单控件绑定到HTML输入框,并在输入框的blur
事件上调用validateField
方法来验证字段。
validateField
方法中,我们获取字段的控件并调用markAsTouched
方法来标记字段为已触摸,这样验证错误消息才会显示。
isFieldInvalid
方法用于检查字段是否无效并且已触摸。
最后,在表单的submit
事件上调用onSubmit
方法来处理表单的提交逻辑。
通过上述方法,你可以实现Angular 10中响应式表单验证在失焦和提交时同时生效的功能。