Add or document the InvalidFormControlDirective
cexbrayat opened this issue · 0 comments
cexbrayat commented
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.