使用Angular内置的验证器和正则表达式模式来验证表单输入。下面是一个简单的例子:
在组件的HTML文件中,添加一个表单元素并指定验证器和模式:
在组件的TS文件中,创建表单并验证该表单:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
template: '... the above HTML code ...'
})
export class MyComponent {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = fb.group({
'myField': ['', Validators.compose([Validators.required, Validators.pattern('[A-Z]{3}')])]
});
}
}
这样做会将一个文本字段添加到表单中,并验证该字段必须只包含三个大写字母。
在这个例子中,包含模式验证器的Validators.compose()
函数被传递给myField
的验证器函数。如果模式不匹配,模式验证器就会验证失败,并在表单控件中添加一个名为“pattern”的错误。我们可以在HTML代码中使用这个错误来指示用户填写正确的字母。