Проверка шаблона телефонного номера при проектировании угловых материалов

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

вчера у меня возникла та же проблема, моя проблема заключалась в том, чтобы удалить шаблон из 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/

Answer 2

Попробуйте это,

  ngOnInit() {

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

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

Answer 3

вы можете попробовать приведенное ниже регулярное выражение, которое сработало для меня

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