Skip to content

Add or document the InvalidFormControlDirective  #136

Description

@cexbrayat

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions