角反応型の文字を入力できないようにする

Question

角4の反応性のフォームを作成しています。

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> 

これまでのところ、私は最後の4 SSNのために、以下の検証ルールを持っています。たとえば、「dn4」と入力すると、次のように表示されます。

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

実際に文字や特殊文字を入力しないようにするにはどうすればよいですか？それは角度の組み込み機能の外にあり、私は何かカスタムを構築する必要がありますか？

Answer 1

私は、ユーザーが数字以外のものを入力するのを止める単純な関数を見つけました。私はそれを残りの世話をする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

Answer 2

、キーコードを取得した文字列に変換し、正規表現を介して実行。

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