Angular中模板驱动形式的正则表达式验证

Question

我需要使用 phone number 中的正则表达式验证正则格式的 template driven form 字段。这就是我尝试过的

addcontact.component.html

<div class="form-group">
   <label for="phone">Phone Number</label>
   <input type="text" class="form-control" id="phone" name="phone" required [(ngModel)]="contact.phone"
   #phone="ngModel" appPhonevalidator />
   <div *ngIf="phone.invalid && (phone.dirty || phone.touched)" class="alert alert-danger">
      <div *ngIf="phone.errors.required">
         Phone number is required.
      </div>
      <div *ngIf="phone.errors?.phoneNumberValid">
         Phone number is not valid.
      </div>
   </div>
</div>

phonevalidator.directive.ts

import { Directive } from '@angular/core';
import { Validator, AbstractControl } from '@angular/forms';
import { ValidatorService } from '../_services/validator.service';
import { Observable } from 'rxjs';

@Directive({
  selector: '[appPhonevalidator]'
})
export class PhonevalidatorDirective implements Validator {
  constructor(private validateService: ValidatorService) {}

  validate(control: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
    console.log(control.value)
    return this.validateService.validatePhoneNumber(control.value)
  }
}

validator.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ValidatorService {
  constructor() { }

  validatePhoneNumber(phone) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const pattern = new RegExp('^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[()-\s\./0-9]*$');
        if (pattern.test(phone)) {
          resolve({ phoneNumberValid: true })
        } else {
          resolve({ phoneNumberValid: false })
        }
      }, 1000);

    })
  }
}

它甚至没有按照预期执行指令。这是怎么了我在app.module.ts(entry module)的声明和提供程序中添加了指令（仅在此处提供相关代码）

app.module.ts

@NgModule({
  declarations: [
    PhonevalidatorDirective
  ],
  providers: [{
    provide: NG_VALIDATORS,
    useClass: PhonevalidatorDirective,
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

更新

在指示提供者有效的情况下，虽然不知道原因

@Directive({
  selector: '[appPhonevalidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => PhonevalidatorDirective), multi: true }]
})