角度材料设计中的电话号码模式验证答案

【问题标题】：Phone number pattern validation in angular material designing角度材料设计中的电话号码模式验证
【发布时间】：2020-08-02 22:00:45
【问题描述】：

我想使用角度材料设计代码验证电话号码，但即使我输入有效的电话号码，下面的代码也无法正常工作，请帮助我

 <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

【问题讨论】：

您如何称呼“有效”电话号码？每个国家/地区可能会有不同的书写方式（空格、破折号、括号等）以及不同的长度。
你能指导我如何验证印度电话号码
对于那些不熟悉印度电话号码的人，您能否在问题中明确说明您要验证的格式？
如果我正确理解了您的要求，那么我认为您需要为您的输入字段编写正则表达式。与您的电话号码类似，您需要验证名称字段用户不应该能够输入特殊字符和数字。使用正则表达式简单易行。
您的 PhoneNumber 新 FormControl 参数在验证器之前有一个错误的“[”。将它移到 "(" 之后。new FormControl(['',Validators.pattern(/^[6-9]\d{9}$/)])

标签： angular angular-material

【解决方案1】：

你可以试试下面对我有用的正则表达式

/^[0-9]{10,10}$/

【讨论】：

stackblitz.com/edit/…

【解决方案2】：

试试这个，

  ngOnInit() {

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

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

【讨论】：