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

Question

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

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 的模式添加验证。

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

例如，您可以这样做：

@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 };
  }
}

干杯

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

Angular custom directive not working on input pattern

html-input

angular-directive

angular-validation

angular

angular-forms