Angular 4手机号码验证答案

【问题标题】：Angular 4 Mobile number validationAngular 4手机号码验证
【发布时间】：2018-03-02 12:23:55
【问题描述】：

我想使用 Angular 4 验证手机号码，它不应该接受除了最多 10 位数字以外的任何字符。

下面是我的代码，

<input type="text" formControlName="mobileNo" minlength=10 maxlength=10>

【问题讨论】：

如果您包含您迄今为止尝试过的内容将会很有帮助！
我已经把这个放在表单组里> 'mobileNo': [null, Validators.compose([Validators.required, Validators.pattern(mobileNoPatternMatch)])]，模式是 const mobileNoPatternMatch = /^[0-9]{10,10}$/
修正了错别字并添加了一个标签，以使目标问题更加具体。

标签： angular

【解决方案1】：

<input type="text" (keypress)="keyPress($event)" minlength=10 maxlength=10>


  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;

    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

【讨论】：

对于 Angular 8，我将 let inputChar 更改为 const inputChar 和 event.keyCode 更改为 event.key 并且它在没有任何已弃用代码警告的情况下工作。谢谢你。

【解决方案2】：

keyPress 事件适用于 chrome，但不适用于 Firefox。在 chrome 中，退格键和箭头键事件默认被忽略并且不运行该功能，但是在 Firefox 中它运行并且这些不起作用。我加了一小行if (event.charCode !== 0)

 _keyPress(event: any) {
    if (event.charCode !== 0) {
      const pattern = /[0-9\+\-\ ]/;
      const inputChar = String.fromCharCode(event.charCode);

      if (!pattern.test(inputChar)) {
        // invalid character, prevent input
        event.preventDefault();
      }
    }
  }

【讨论】：

【解决方案3】：

只需添加验证器模式

mobileNumber: new FormControl(null, [Validators.pattern("[0-9]{0-10}")])

类型为数字，避免接受任何字符

【讨论】：

我试过这样做，但没有奏效。模式 [0-9]{0,10} （在花括号内用逗号代替连字符）对我有用。此模式的解释是：[0-9] 将匹配 0 到 9 之间的任何数字，而 {0,10} 表示您可以输入 0 到 10 个数字（包括两者）。
像+、-等符号呢

【解决方案4】：

我们可以使用模式来验证手机号码的角度。

<form #userInfoForm="ngForm">
    <input type="text" name="mobile" ngModel placeholder="MOBILE NUMBER" [pattern]="'[789][0-9]{9}'">
</form>
<div class="btn-wrp">
   <button (click)="submit(userInfoForm)">Submit</button>
</div>

在打字稿中，我检查表单是否有效并发送错误消息

submit(userDetailsForm: NgForm) {
    if(userDetailsForm.invalid){
       this.toastr.error('Please enter valid details');
       return false;
    }else{
       this.router.navigate(["frontend/car/quotes"]);
    }
}

【讨论】：

【解决方案5】：

试试这个代码...... 打字稿代码..

  form: FormGroup;
  pattern1 =  "^[0-9_-]{10,12}";
  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({
      phone: ['', [Validators.required, Validators.pattern(this.pattern1)]]
    })
  }

html 代码..

<form [formGroup]="form">
  <input type="text" formControlName="phone">
  <ng-container *ngIf="form.controls.phone.errors">
   <ng-container *ngIf="form.controls.phone.errors.pattern">
    phone no is not statndard patter
    </ng-container>
      <ng-container *ngIf="form.controls.phone.errors.required">
    phone no is required
    </ng-container>
  </ng-container>

</form>

【讨论】：