Ninja-Squad/ngx-valdemort

Add or document the InvalidFormControlDirective

cexbrayat opened this issue · 0 comments

We often use in our Boostrap project the following directive, that automatically adds the is-invalid class depending on the control state and valdemort config:

/* tslint:disable:directive-selector */
import { Directive, HostBinding, Optional } from '@angular/core';
import { NgControl } from '@angular/forms';
import { ValdemortConfig } from 'ngx-valdemort';

/**
 * Directive that dynamically adds/removes the CSS class is-invalid, used by Bootstrap 4, on
 * elements which already have the form-control Bootstrap CSS class, based on the
 * validity of the NgControl directive also present on this element and on the rules
 * configured by the ValdemortConfig service to decide when the validation errors should be displayed.
 */
@Directive({
  selector: '.form-control'
})
export class InvalidFormControlDirective {

  /**
   * Constructor.
   * @param ngControl the NgControl directive (if any), which can in fact be the NgModel directive, or the formControlName
   * directive, or any other directive that extends NgControl
   * @param config the ValdemortConfig service, used to know when the is-invalid class must be added
   */
  constructor(@Optional() private ngControl: NgControl, private config: ValdemortConfig) { }

  @HostBinding('class.is-invalid') get isInvalid() {
    return this.ngControl
      && this.ngControl.invalid
      && this.config.shouldDisplayErrors(this.ngControl.control, (this.ngControl as any).formDirective);
  }
}

We could include this directive (maybe in a dedicated valdemort-boostrap module?) or at least document it in the Bootstrap 4 integration section.