Проверка регулярных выражений в форме на основе шаблона в Angular - PullRequest
Новая
       23

Проверка регулярных выражений в форме на основе шаблона в Angular

0 голосов
/ 22 апреля 2020

Мне нужно проверить поле phone number в форме, используя регулярное выражение в template driven form в angular. Это то, что я пробовал

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 }]
})
...