angular - 我的验证器告诉 'invalid' 即使它实际上不是

Question

我目前正在制作一个文本字段，该字段不应为空，也不应允许以特定字符链开头。 (让我们说“测试”)

例如我希望 testxyz 或 无效，而其他任何内容都有效。我已经得到了正则表达式:/^((?!(test)).)*$/gmi。我知道像 abctest 这样的东西也是无效的，但这对这种情况并不重要。

问题是，一旦我每次输入一个字符数为偶数(!)的字符串时提交无效输入，验证器就会说这是一个无效输入(它打印“错误 2”；你可以看到它从哪里得到打印在 HTML 中)，即使它不是!

例如如果我先写 test 它会给我一个错误，说它无效。正确的。如果我然后写任何字符，比如 a 它不会给我一个错误。也正确。但是只要我写了偶数个字符，不管是什么 (!)，比如 aa 或 wxyz 它都会给我一个不应该出现的错误!

无论如何我都可以提交它并且一切正常，这只是验证器的错误“解释”，我不知道他为什么要那样做。也许有人可以帮助我。我在下面添加了代码。

HTML:

<h1 mat-dialog-title>{{data.dialogTitle}}</h1>
<div mat-dialog-content>
  <p class="mat-typography">{{data.dialogText}}</p>
</div>

<mat-form-field>
  <input matInput [(ngModel)]="name" placeholder="Enter your name?" [formControl]="InputControl">
  <mat-error *ngIf='InputControl.hasError("required")'>
    Error 1
  </mat-error>
  <mat-error *ngIf='InputControl.hasError("pattern")'>
    Error 2
  </mat-error>
</mat-form-field>

<mat-dialog-actions>
  <span style="flex: 1 1 auto"></span>
  <button mat-flat-button (click)="pressed()" class="mat-primary">OK</button>
</mat-dialog-actions>

typescript :

export class DialogComponent {

    regExp = /^((?!(test)).)*$/gmi;
    InputControl = new FormControl("", [Validators.required, Validators.pattern(this.regExp)])
    @Input() name:string

    constructor(public dialogRef: MatDialogRef<DialogComponent>,
                @Optional() @Inject(MAT_DIALOG_DATA) public data: any) { }

    pressed() {
        console.log(this.name.match(this.regExp));
        if(this.regExp.test(this.name)) {
            alert("valid");
            this.dialogRef.close(true);
        }
    }
}

提前致谢。

Answer 1

根本原因在于执行上下文。在您的 Validators.pattern 函数中，您通过 this.regExp 引用它的参数，但该函数不会在当前 Controller 的范围内执行，因此 在这种情况下，this 不会指向您的 Controller ，而是指向 InputControl 类的某些 Angular 内部结构。所以，简单地说，你丢失了this。

快速而肮脏的解决方案更改:

Validators.pattern(this.regExp)  

到:

Validators.pattern(/^((?!(test)).)*$/gmi)

并验证这些是否有帮助。

如果是，那么如果您仍然希望将模式存储在 Controller 中，您基本上必须将验证器函数包装在另一个 Controller 函数中以将模式包含在闭包中，这将可用于在执行上下文中运行:

getMyValidation(): (AbstractControl): ValidationErrors | null {
  let pattern = this.regExp;
  return Validators.pattern(pattern)
}

并将其传递给构造函数，如下所示:

InputControl = new FormControl("", [Validators.required, this.getMyValidation()])