角度自定义指令不适用于输入模式

Question

我正在尝试使用自定义Angular指令设置regex模式：

import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appPasswordRegex]',
})
export class PasswordRegexDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.pattern = '^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$';
}
}

HTML:

<input
appPasswordRegex
type="password"
ngModel
name="password"
required
minlength="7"
/>

我还在控制台中检查了this.el，模式属性更改成功，但它没有在操作中应用。与此相反，如果我只是在下面这样的输入中写入模式，它可以完美地工作，即使在这两种情况下都更改了模式属性：

<input
type="password"
ngModel
name="password"
required
pattern="^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$"
minlength="7"
/>

问题出在哪里？

Answer 1

当您将pattern直接添加到具有ngModel的输入中时，您不仅仅是在设置属性。在FormsModule中，有一个PatternValidator指令与该选择器匹配，并围绕提供给ngModel的FormControl的模式添加验证。

要使用指令实现类似的行为，必须创建一个自定义验证器指令。在这里你可以找到关于如何创建它们的官方文档。

举个例子，你可以这样做：

@Directive({
selector: '[appPasswordRegex]',
providers: [
{
provide: NG_VALIDATORS,
useExisting: PasswordRegexDirective,
multi: true,
},
],
})
export class PasswordRegexDirective implements Validator {
validate(control: AbstractControl): ValidationErrors {
return /^(?=.*?[a-zA-Z])(?=.*?[0-9]).*$/.test(control.value)
? null
: { invalidPassword: true };
}
}

欢呼