Директива Angular 6 вызывается позже проверки выражения Regex, из-за которой проверка не удалась - PullRequest
Новая
       10

Директива Angular 6 вызывается позже проверки выражения Regex, из-за которой проверка не удалась

0 голосов
/ 06 сентября 2018

При проверке проверки для номера телефона в международном формате проверка не проходит как "

Что ожидает шаблон регулярного выражения:

123-456-7890

и приведенная ниже пользовательская директива помогает мне добавлять дефисы (-) в ngmodel, но до тех пор, пока пользовательская директива не добавит дефисы, проверка шаблона регулярного выражения будет выполняться и каждый раз будет сбоем. 

import { Directive,ElementRef } from '@angular/core';

@Directive({
  selector: '[num-format]',
  host: {
    '(ngModelChange)': 'doSomething($event)'
  }
})

export class NumFormatDirective {

  constructor(public _el: ElementRef) {}
  doSomething(event) {
    var a;
    //a = this._el.nativeElement.value.replace(/^(\d{3})(\d{3})(\d{4})$/)
    var cleaned = ("" + this._el.nativeElement.value).replace(/\D/g, '');
    var match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {
      a = match[1] + "-" + match[2] + "-" + match[3];
      this._el.nativeElement.value = a;
      console.log(a);
    }
  }

}

И шаблон: 

<input 
  type="text" 
  num-format 
  name="phoneNo" 
  #PhoneNo="ngModel" 
  [(ngModel)]="user.phoneNo"  
  (ngModelChange)="user.phoneNo=$event" 
  placeholder="Phone Number" 
  pattern="phonePattern" 
  required />
<div *ngIf="PhoneNo.invalid && (PhoneNo.dirty || PhoneNo.touched)">
  <div *ngIf="PhoneNo.errors.required">
    <small class="text-danger validation-messages">
      Phone Number is required.
    </small>
  </div>
  <div *ngIf="PhoneNo.errors.pattern">
    <small class="text-danger validation-messages">
      Not a valid Phone Number.
    </small>
  </div>


  <!--phonePattern = /^\d{3}-\d{3}-\d{4}$/; ( in TS file)-->
...