如果您的库验证指令无效,则可能的原因是验证指令中的某些代码不正确。为了解决此问题,请执行以下步骤:
下面是一个示例代码,演示了如何创建一个自定义验证指令,以用作Angular表单控件的验证器:
import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';
@Directive({
selector: '[appCustomValidator]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: CustomValidatorDirective,
multi: true
}
]
})
export class CustomValidatorDirective implements Validator {
validate(control: AbstractControl): { [key: string]: any } | null {
const forbidden = /(microsoft|google)/i.test(control.value);
return forbidden ? { 'forbiddenName': { value: control.value } } : null;
}
}
在上面的代码中,我们定义了一个名为appCustomValidator
的自定义验证指令,并实现了Validator
接口。validate
方法是我们可以用来自定义验证逻辑并返回验证结果的方法。在这种情况下,我们将输入中是否包含Microsoft或Google这两个单词作为验证逻辑,如果是,返回forbiddenName
错误,并将输入值作为值传递给错误对象。
最后,我们将该指令提供给表单控件的验证器,以便我们可以在表单中使用该指令来验证输入。