电话号码的角度matInput Validators.pattern

时间:2018-08-07 01:47:13

标签: regex angular validation design-patterns

我喜欢Material输入具有内置的电子邮件验证程序

  myFormControl = new FormControl('', [
    Validators.required,
    Validators.email
  ]);

但是没有一个电话号码。在上面的myFormControl中,我将电子邮件验证器更改为一种模式,可以广泛处理电话号码...

  myFormControl = new FormControl('', [
    Validators.required,
    Validators.pattern('^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$')
  ]);

但是,当我尝试创建HTML来处理电话号码输入时...

  <mat-form-field class="form-field">
      <input matInput placeholder="Phone Number" [formControl]="myIDFormControl" 
        [errorStateMatcher]="matcher">
      <mat-hint>Must be a valid phone number</mat-hint>
      <mat-error *ngIf="myIDFormControl.hasError('pattern') && !myIDFormControl.hasError('required')">
        Please enter a valid phone number
      </mat-error>
      <mat-error *ngIf="myIDFormControl.hasError('required')">
        Phone number is <strong>required</strong>
      </mat-error>
    </mat-form-field>

我收到此错误...

  

ERROR语法错误:“没有重复”

我认为这与Validators.pattern中RegEx的格式有关。但是,我尝试了大约5种不同的RegEx罐头电话号码,它们似乎都产生了此错误。

在Angular6 Material中可以满足这种需求的模式是什么?

0 个答案:

没有答案