angular - 如何禁止 Angular Material 输入字段的错误输入

Question

我有一个简单的 Angular Material 输入字段

<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 = ''

        }

    }

相关帖子:How to restrict special characters in the input field using angular2/ typescript