Angular--Zorro中InputNumber數字輸入框禁止輸入非法字符（英文，標點等）

原創

2020-02-21 06:33

組件來源地址：https://ng.ant.design/components/input-number/zh

我在項目中遇到的問題：使用nz-input-number組件，若用戶輸入非法字符，input框立馬變爲紅色，表示警告。我第一反應就是一旦監聽到用戶輸入了非法字符（除數字之外的），立馬給予警告，同時input框就是這樣實現的校驗，但是在實際操作的過程中就會發現，我們無法實時監聽用戶的輸入行爲。

使用過該組件的用戶會知道，即便該組件是數字框，但是依然可以輸入英文及其他除數字之外的字符，只是在失焦的時候，input中的值會變爲就近輸入過的整數值，這一點官網也有介紹。同時有一點，我想對該組件進行校驗的時候，並不能在用戶輸入的過程中做到實時監聽用戶的輸入。

在解決過程中，想到用正則表達式限制用戶輸入除數字之外的其他字符。方法如下：

<nz-input-number
    formControlName="pwd_login_timeout"
    [nzMin]="0"
    [nzMax]="120"
    [nzStep]="1"
    id="timeout"
    [(ngModel)]="pwdLoginTimeout"
    (ngModelChange)="changeMethod()"
    (input)="onInput($event)"
></nz-input-number>

onInput($event) {
    // console.log($event)
    if (!$event) {
      return;
    }
    const target = $event.target;
    console.log(target)
    const regexp = /^(\d)+$/;
    target.value = target.value.replace(regexp, '');
    console.log(target.value)
  }

因爲在方法中，對用戶的輸入進行了校驗，並且校驗不成功就會替換爲空，因此可以做到禁止用戶輸入非法字符。但是這一點並不能真正解決我的需求。因此，還需要進行校驗，https://angular.cn/guide/form-validation即angular的表單驗證。當然這兩部分的結合可以實現。但是我在使用過程中，校驗會出現問題。

上述問題的第二種方法其實可以用指令的方式解決，但是我還沒有實踐，若真正實踐了之後，會將代碼附上。

其實我們最終的解決方案是將nz-input-number換成了input，因爲他可以做到實時監聽，代碼如下：