2

我正在构建一个 Angular 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 的内置功能，我需要构建一些自定义的东西？

4

2 回答 2

2

我发现了一个简单的功能，可以阻止用户输入除数字以外的任何内容。我将它与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演示

于 2017-06-13T18:37:33.623 回答
1

获取键码，转换为字符串，通过正则表达式运行。

numbersOnlyValidation(event){    
 const inp = String.fromCharCode(event.keyCode);    
 /*Allow only numbers*/
  if (!/^\d+$/.test(inp)){
   event.preventDefault()
  }    
 }
于 2017-07-11T15:54:34.260 回答