防止用戶輸入角度反應形式的字母

-1

我正在構建一個角度4反應形式。到目前爲止，我有去年4 SSN以下驗證規則：防止用戶輸入角度反應形式的字母

last4Ssn: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4), Validators.pattern('^[0-9]+$')]],

模板：

<label>Last 4 SSN 
    <input formControlName="last4Ssn" > 
    {{ shortForm.get('last4Ssn').errors | json }} 
    <div 
    class="error" 
    *ngIf="shortForm.get('last4Ssn').hasError('required') && shortForm.get('last4Ssn').touched"> 
    Name is required 
    </div> 
    <div 
    class="error" 
    *ngIf="shortForm.get('last4Ssn').hasError('minlength') && shortForm.get('last4Ssn').touched"> 
    Minimum of 4 characters 
    </div> 
</label>

這正確調用了錯誤。例如，如果我輸入「dn4」，則可以打印出以下內容：

{ "minlength": { "requiredLength": 4, "actualLength": 3 }, 
    "pattern": { "requiredPattern": "^^[0-9]+$$", "actualValue": "dn#" } }

我該如何防止用戶輸入字母或特殊字符？那是否超出了angular的內置功能，我需要構建一些自定義的東西？

來源

2017-06-13 Anthony

我發現了一個簡單的函數，可以阻止用戶輸入除數字之外的任何內容。我將其與keypress事件綁定在一起，其餘事件均由其處理。

onlyNumberKey(event){ 
     let charCode = (event.query) ? event.query : event.keyCode; 
     console.log(charCode); 
      if (charCode > 31 
       && (charCode < 48 || charCode > 57)) 
       return false; 

      return true; 
    }

HTML：

<md-input-container> 
    <input mdInput placeholder="Last 4 SSN" (keypress)="onlyNumberKey($event)"> 
</md-input-container>

Plnkr demo

來源

2017-06-13 18:37:33 Nehal

建立你的答案並通過正則表達式運行keyCode。 – Anthony

獲取鍵碼，轉換爲字符串，通過正則表達式運行。

numbersOnlyValidation(event){  
const inp = String.fromCharCode(event.keyCode);  
/*Allow only numbers*/ 
    if (!/^\d+$/.test(inp)){ 
    event.preventDefault() 
    }  
}

來源

2017-07-11 15:54:34 Anthony

防止用戶輸入角度反應形式的字母

回答

相關問題