Мой валидатор говорит «неверно», хотя на самом деле это не

Question

В настоящее время я создаю текстовое поле, которое не должно быть пустым, а также не должно начинаться с определенной цепочки символов. (скажем, «тест»)

Так, например, Я хочу, чтобы testxyz или были недействительными, а все остальное - недействительными. Я уже получил RegExp: /^((?!(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>

Машинопись:

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

Хорошо, так что, видимо, я сам нашел ошибку. Это было связано с флагами, которые я использовал. gmi

Я удалил «g» и теперь он работает. Я думаю, что это как-то связано с тем, как работают объекты RegExp. Когда вы используете флаг 'g', объект отслеживает lastIndex, где произошло совпадение, поэтому при последующих совпадениях он будет начинаться оттуда. Если вы уберете флаг 'g', он в основном обнулит его после совпадения и тем самым решит мою проблему. Однако я не уверен на 100% в этом.

Answer 2

Основная причина - в контекстах выполнения. В вашей функции Validators.pattern вы обращаетесь к ее параметру через this.regExp, но эта функция не будет выполняться в области действия текущего контроллера, и в результате this будет указывать не на ваш контроллер, а на некоторые внутренние угловые элементы InputControl класс в этом случае. Итак, говоря просто, вы потеряли this.

Для быстрой и грязной замены раствора:

Validators.pattern(this.regExp)  

до:

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

И проверьте, помогают ли они.

Если да, то, если вы все еще хотите сохранить шаблон в контроллере, вам, в основном, нужно обернуть свою функцию валидатора в другую функцию контроллера, чтобы заключить шаблон в замыкание, которое будет доступно для функции в контексте выполнения:

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

и передайте его конструктору формы следующим образом:

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