Пользовательская проверка в Angular не работает для события KeyPress - PullRequest
Новая
       29

Пользовательская проверка в Angular не работает для события KeyPress

1 голос
/ 13 апреля 2020

У меня есть 2 поля в форме. 

<input type='text' maxlength='2' formControlName="userIdMinLength" 
class='e-input' (keypress)='omitSpecialCharacters($event);'>

<input type='text' maxlength='2' formControlName="userIdMaxLength" 
class='e-input' (keypress)='omitSpecialCharacters($event);'>

<div class="col-md-12" *ngIf="submitted && f.userIdMaxLength.errors">
     <div class="invalid-feedback">
        <div *ngIf="f.userIdMaxLength.errors.fieldShouldBeGrater">
            The Maximum User ID length should be greater than the Minimum User ID
            length.
        </div>
     </div>
</div>

Я использую событие нажатия клавиши для проверки ввода, как показано ниже: 

omitSpecialCharacters(event) {
    return /^[0-9]*$/.test(event.key);
}

В AppComponent .ts файл, у меня есть объект Form и пользовательская проверка, как показано ниже: 

export class AppComponent implements OnInit {
  constructor(
    private fb: FormBuilder,
  ) {
    this.initializeForm();
  }

  ngOnInit() {
     this.getData();
  }

  initializeForm() {
      this.myFom= this.fb.group({
           userIdMinLength: [null, Validators.required],
           userIdMaxLength: [null, Validators.required],
      },
      {
        validator: [
        FieldShouldBeGreater('userIdMinLength', 'userIdMaxLength')
      });
  }
}

Мой пользовательский код проверки выглядит следующим образом: 

export function FieldShouldBeGreater(sourceControl: string, comparingToControl: string) {
    return (formGroup: FormGroup) => {
        const control = formGroup.controls[sourceControl];
        const comparingTo = formGroup.controls[comparingToControl];

        if (control && comparingTo) {
            if (comparingTo.errors && !comparingTo.errors.fieldShouldBeGrater) {
                return;
            }

            if (control.value > comparingTo.value) {
                comparingTo.setErrors({ fieldShouldBeGrater: true });
            } else {
                comparingTo.setErrors(null);
            }
        }
        return null;
    };
}

Здесь проблема с нажатием клавиши , Когда я ввожу 5 для поля userIdMinLength и начинаю вводить 10 для userIdMaxLength, он всегда оценивает первый символ из 10 (т. Е. 1), сравнивает с 5 и выдает ошибку.

Как справиться с этим?

1 Ответ

0 голосов
/ 16 апреля 2020

Вы можете обернуть его с помощью setTimeout(() => {...}, 1000), чтобы не было немедленной установки ошибки. Вы можете сделать это легко, разрешив сообщение об ошибке или значение NULL и установив ошибку, только если текущее значение совпадает с полученным назад из постановляющего заявления. Обратите внимание, что вам также потребуется изменить подпись проверки на asyn c функцию проверки.

...