角材料设计中的电话号码模式验证 [英] Phone number pattern validation in angular material designing

问题描述

我想使用棱角分明的设计代码来验证电话号码，但是即使我输入了有效的电话号码，下面的代码也无法使用

I want to validate phone number using angular material designing code but below code is not working even when i enter valid phone number ca n some on help me please

 <mat-form-field class="example-full-width">
                <input matInput placeholder="Phone number" formControlName="PhoneNumber"
                   [errorStateMatcher]="matcher" [(ngModel)]="PhoneNumber" required pattern="[6-9]\\d{9}" maxlength="10">
                     <mat-hint>Errors appear instantly!</mat-hint>
                     <mat-error *ngIf="emailForm.get('PhoneNumber').hasError('required')">
                       Phone number is <strong>required</strong>
                     </mat-error>
                      <mat-error *ngIf="!emailForm.get('PhoneNumber').hasError('required') &&emailForm.get('PhoneNumber').hasError('pattern')">
                      Please enter valid mumber
                     </mat-error>
          </mat-form-field>

    ngOnInit() {

    //Form Group
    this.emailForm = new FormGroup({
      PhoneNumber:new FormControl('',[Validators.pattern(/^[6-9]\d{9}$/)]),
    });
}

https://stackblitz.com/edit/angular-2m1vdq-7vzaq8?file=app%2Finput-error-state-matcher-example.html

推荐答案

尝试一下，

  ngOnInit() {

    let MOBILE_PATTERN = /[0-9\+\-\ ]/;

    this.emailForm = new FormGroup({
      PhoneNumber:new FormControl('',[Validators.pattern(MOBILE_PATTERN)])
    });
  }

这篇关于角材料设计中的电话号码模式验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！