directive for reactive form validation not working


I am trying to implement required field validation using directive and its not working. I need to apply the class to highlight the box red based on validation run. At the moment it looks like the requirefieldvalidator is not getting triggered. Not sure what is wrong here. Is it fine using it in the ngClass like the way I have done.

This is what I have tried

  <label>Phone number</label>
     <input type="text" placeholder="Phone number" formControlName="phoneNo"  [ngClass]="{'isError' : 'requiredFieldValidator  [submitted] = submitted'}" />


    selector: '[requiredFieldValidator]',
    providers: [{ provide: NG_VALIDATORS, useExisting: RequiredFieldValidatorDirective , multi: true}]
export class RequiredFieldValidatorDirective implements Validator {
    @Input() submitted: boolean = false;

    validate(control: AbstractControl): { [key: string]: any } {
        return (this.submitted || control.touched) && control.errors?.required;

Source: Angular Questions

Categorized as angular, angular-reactive-forms Tagged ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us