Regex Validation in template driven form in Angular - regex

Question

I need to validate phone number field in form using regex in template driven form in angular. This is what i have tried
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);
})
}
}
Its not even going to the directive as expected. Whats wrong in here? I added the directive in declaration and providers in app.module.ts(entry module) (Only giving relevant code here)
app.module.ts
#NgModule({
declarations: [
PhonevalidatorDirective
],
providers: [{
provide: NG_VALIDATORS,
useClass: PhonevalidatorDirective,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule { }
UPDATE
After giving the providers in directive it worked, don't know the reason though
#Directive({
selector: '[appPhonevalidator]',
providers: [{ provide: NG_VALIDATORS, useExisting: forwardRef(() => PhonevalidatorDirective), multi: true }]
})