This directive will automatically add `is-valid` or `is-invalid` class to the form controls depending on its validity status #angular

control-validity-class.directive.ts

import { Directive, ElementRef, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, NgControl } from "@angular/forms";
import { Subscription } from "rxjs";

@Directive({
  selector: '[formControl], [formControlName]',
})
export class ControlValidityClassDirective implements OnInit, OnDestroy {
  @HostBinding('class.is-valid')
  isValid = true;

  @HostBinding('class.is-invalid')
  isInvalid = false;

  private subscription: Subscription;

  constructor(private controlDir: NgControl) { }

  ngOnInit(): void {
    const control = this.control;
    if (!control) {
      console.warn('Unknown control');
    } else {
      this.subscription = control.statusChanges.subscribe(status => {
        this.isValid = status === 'VALID';
        this.isInvalid = status === 'INVALID';
      });
    }

  }

  ngOnDestroy(): void {
    if (this.subscription) this.subscription.unsubscribe();
  }

  get control(): AbstractControl | null {
    return this.controlDir.control;
  }
}