在 Angular 中,可以通过给表单添加一个点击事件的监听器来实现表单字段的验证。下面是一个示例代码:
HTML:
TypeScript:
import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
@ViewChild('myForm') myForm!: NgForm;
validateFields() {
this.myForm.control.markAllAsTouched();
}
onSubmit() {
console.log(this.myForm.value);
// do something with the form data
}
}
在这个例子中,我们监听了 “Submit” 按钮的点击事件,并在点击时调用了 validateFields()
函数。在 validateFields()
函数中,我们通过 markAllAsTouched()
方法设置了表单控件的状态为“已触摸”,这会导致 Angular 自动验证表单中的所有字段。
值得注意的是,在点击“Submit”按钮之前,表单字段只有在它们失去焦点时才会被验证。但是,通过在点击按钮时手动调用 markAllAsTouched()
方法,我们可以在不需要离开字段的情况下立即验证表单。
上一篇:Angular表单字段未绑定