要实现Angular自定义验证器高亮显示字段,但不设置 的无效性,可以按照以下步骤进行:
首先,创建一个自定义验证器函数。这个函数将接收控件作为参数,并返回一个对象,其中键是验证器的名称,值是验证器的结果。在这个函数中,你可以根据需要设置自定义的验证逻辑。
import { AbstractControl, ValidationErrors } from '@angular/forms';
export function customValidator(control: AbstractControl): ValidationErrors | null {
// 在这里编写自定义的验证逻辑
// 如果验证失败,返回一个包含 'customError' 键的对象
// 如果验证成功,返回 null
if (control.value === 'admin') {
return { customError: true };
}
return null;
}
接下来,在你的组件中,使用 Validators.compose() 方法将自定义验证器与其他验证器(如 required 或 minLength)组合起来。然后,将这个验证器应用到相应的 控件上。
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { customValidator } from './custom-validator';
@Component({
selector: 'app-root',
template: `
`,
styles: [`
.invalid {
border-color: red;
}
`]
})
export class AppComponent {
myForm: FormGroup;
constructor() {
this.myForm = new FormGroup({
username: new FormControl('', Validators.compose([Validators.required, Validators.minLength(5), customValidator]))
});
}
}
在模板中,我们使用 元素绑定了 FormGroup 中的 'username' 控件,并根据自定义验证器的结果动态添加或移除了一个用于显示错误信息的
最后,在组件的样式中,定义了一个名为 'invalid' 的类,用于设置无效字段的样式(例如红色边框)。
这样,当用户输入的用户名为 'admin' 时,该字段将被标记为无效,并高亮显示。但是,Angular 不会自动设置 的无效性,因此用户仍然可以提交表单。