NgxErrorControl

This package provides a directive, which can connect to a form's AbstractControl.

The html element which has the directive will display the preset error message when the connected AbstractControl is invalid. It stores whether the AbstractControl has error or not, inside the element's 'hasError' attribute.

Usage:

• Import the NgxErrorControlDirective (standalone):

import {NgxErrorControlDirective} from "ngx-error-control";

• Optional - Set the messages if needed (these are the default):

NgxErrorControlDirective.setMessages(new Map<string, { message: string }>([
  ['required', {message: 'This field is required'}],
  ['minlength', {message: 'Password must be at least {x} characters long'}],
  ['maxlength', {message: 'Password cannot be more than {x} characters long'}],
  ['email', {message: 'Email must be a valid email address'}],
]))

• Create a form:

this.form = this.fb.group({
  name: ['', [Validators.email]]
})

• Connect form with Html elements:

<form [formGroup]="form">
    <input type="text" name="name" formControlName="name">
    <p [ngxErrorControl]="form.get('name')"></p>
</form>

• Optional - add animation to p element:
  • The hasError attribute is 'false' or 'true', whether the control has error message or not.

<form [formGroup]="form">
  <input type="text" name="name" formControlName="name">
  <p #p0 [@growInOut]="p0.getAttribute('hasError')" [ngxErrorControl]="form.get('name')"></p>
</form>

• Optional - set timeout:
  • timeout = The wait time until the error message disappears after control become valid (default = 500)
  • Useful for animations

<form [formGroup]="form">
  <input type="text" name="name" formControlName="name">
  <p #p2 [@growInOut]="p2.getAttribute('hasError')" [timeout]="200" [ngxErrorControl]="form.get('sajt')"></p>
</form>