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

Question

我想验证电话号码使用角度材料设计代码，但下面的代码是不工作，即使我输入有效的电话号码可以一些关于帮助我

 <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

Answer 1

你可以试试下面的正则表达式，它对我很有效

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

Answer 2

试试这个，

  ngOnInit() {

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

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

Answer 3

昨天我遇到了同样的问题，我的问题是从formControl中删除模式，然后在html中插入

      <input matInput placeholder="Phone number" formControlName="PhoneNumber"
     [errorStateMatcher]="matcher" [(ngModel)]="PhoneNumber"
 required pattern="^[6-9]\d{9}$" maxlength="10">


            ngOnInit() {

            //Form Group
            this.emailForm = new FormGroup({
              PhoneNumber:new FormControl('',[]),
            });
        }

下面是我如何使用它的例子：

      <mat-form-field class="rung">
        <input matInput [formControl]="selectRung" [(ngModel)]="rung"
        placeholder="Rung" type="number" pattern="^\d*[0-9]\d*$"
        name="rung" [value]="rung" min="0" id="rung"
          required="true">
          <mat-error *ngIf="selectRung.hasError('required')">Rung is required!</mat-error>
          <mat-error *ngIf="selectRung.hasError('pattern')">Only positive or 0!</mat-error>
      </mat-form-field>

在.ts中

  selectRung = new FormControl(null, [Validators.required]);

它对我来说很好，

你也可以在这个网站上检查自己的模式，如果它工作正常，https://regex101.com/