Validation: CSS classes? about ngrx-forms HOT 5 CLOSED

import {Directive, ElementRef, Input, Renderer2} from "@angular/core";
import {FormControlState} from "ngrx-forms";


/**
 * This directive automatically adds the Angular CSS classes to ngrx-forms controls.
 * See
 * https://angular.io/guide/form-validation#control-status-css-classes
 * and
 * https://github.com/MrWolfZ/ngrx-forms/issues/34#issuecomment-358785776
 */
@Directive({
	selector: "[ngrxFormControlState]",
})
export class NgrxSetFormControlClassDirective {
	@Input()
	set ngrxFormControlState(state: FormControlState<any>) {
		this.addOrRemoveCssClass(state.isValid, "ng-valid");
		this.addOrRemoveCssClass(state.isInvalid, "ng-invalid");
		this.addOrRemoveCssClass(state.isValidationPending, "ng-pending");
		this.addOrRemoveCssClass(state.isPristine, "ng-pristine");
		this.addOrRemoveCssClass(state.isDirty, "ng-dirty");
		this.addOrRemoveCssClass(state.isUntouched, "ng-untouched");
		this.addOrRemoveCssClass(state.isTouched, "ng-touched");
	};
	
	constructor(private element: ElementRef, private renderer: Renderer2,) {
	}
	
	private addOrRemoveCssClass(add: boolean, cssClass: string): void {
		if (add) {
			this.renderer.addClass(this.element.nativeElement, cssClass);
		} else {
			this.renderer.removeClass(this.element.nativeElement, cssClass);
		}
	}
}