Angular表单验证器只在文本框中输入时起作用的解决方法如下所示:
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
template: `
`
})
export class MyFormComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
myInput: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]*')])
});
}
}
formControlName
指令将表单控件与输入框绑定,并在该控件的 invalid
状态为 true
时显示相应的错误消息。请注意,这里使用了 dirty
和 touched
属性来判断输入框是否已经被编辑过,以避免在一开始就显示错误消息。
此外,你可以根据需要修改验证器的类型和正则表达式。在上面的示例中,Validators.required
确保输入框不为空,Validators.pattern('[a-zA-Z]*')
确保输入框只包含字母。
希望这个示例能够帮助你理解如何在Angular中使用表单验证器,并在文本框中输入时起作用。