Как запретить неправильный ввод для поля ввода углового материала

Question

У меня есть простое поле ввода углового материала

<form [formGroup]="parentFG">
  <mat-form-field>
    <input [formControlName]="CALCULATOR_INPUT" matInput placeholder="" autocomplete="off" (keyup)="updateInput($event)">
  </mat-form-field>
</form>

С контролем формы и валидатором, который допускает только целые числа без знака

  ngOnInit() {
    let formControl = new FormControl('', UIntValidatorDirective.validateFunc);

    this.parentFG.addControl(this.CALCULATOR_INPUT, formControl);
  }

Валидатор работает и выделяет ввод красным цветом, когдавведен неверный ввод.Тем не менее, я не хочу, чтобы пользователь вводил неправильный ввод в первую очередь.Есть ли способ запретить размещение недопустимых символов или строк в поле ввода?

Answer 1

Вы можете написать regex функцию фильтра и добавить желаемое поведение.

базовый пример : вы можете комбинировать это с Rxjs для проверки ввода при каждом нажатии клавиши или пользовательскоминтервал времени.

    RemoveInvalidString(formInputValue){

        if (!(/^\d+$/.test(formInputValue))) { //unsigned integer?

            console.log("removing input value", formInputValue)

            formInputValue = ''

        }

    }

похожие посты : Как ограничить специальные символы в поле ввода с помощью angular2 / typescript