Question

我正在构建一个角度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#" } }

如何实际阻止用户输入字母或特殊字符？这是在角度的内置功能之外，我需要构建自定义的东西？

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()
  }    
 }

防止用户以角度反应形式输入字母

2 个答案: