ngx-form-err v12.0.0

Description

Angular library for displaying your form validation errors

Reactive and template forms, customization of error display logic, customization of messages and variables in messages are supported.

Features

• Support for reactive and templated forms
• customize error display logic:
  • always
  • when typing
  • when you lose focus
  • when submitting a form
• small markup
• change messages to your liking, for localization messages
• variable in messages, include specifics from validator (e.g. min length)

Demo

Installation

$ npm install ngx-from-err

Add the module to your application

@Module({
  imports: [
    BrowserModule,
    NgxFormErrModule,  // <- import
  ],
})
export class AppModule {
}

Usage

Template-driven form

<form>
  <label>Firstname</label>
  <input class="form-control" name="firstname" [(ngModel)]="name"
         placeholder="Enter your firstname"
         [required]="true"
         [minlength]="2"
         pattern="[a-z]*"
         #nameNgModel="ngModel">

  <ngx-form-err [control]="nameNgModel"></ngx-form-err>
</form>

Reactive form

Template

<form [formGroup]="userForm">

  <div class="form-group mb-3">
    <label>Firstname</label>
    <input class="form-control" placeholder="Enter your firstname" formControlName="name">
    <ngx-form-err [control]="userForm.controls.name"></ngx-form-err>
  </div>

  <div class="form-group">
    <label>Firstname</label>
    <input class="form-control" placeholder="Enter your lastname" formControlName="lastname">
    <ngx-form-err [control]="userForm.controls.lastname"></ngx-form-err>
  </div>

  <button class="btn btn-primary mt-3" type="submit">Submit</button>

</form>

Controller

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.userForm = this.formBuilder.group({
      name: [null, [Validators.required, Validators.minLength(2), Validators.pattern(/[a-z]*/)]],
      lastname: [null, [Validators.required, Validators.maxLength(10), Validators.pattern(/[a-z -]*/)]],
    });
  }


}

Components

ngx-form-err

Component for displaying validation errors for one input

Inputs

Configurations

Module-level configuration

You can pass the config file when connecting the module to your application, The configuration object is of type NgxFormErrConfig

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxFormErrModule.forRoot({
      mode: NgxFormErrViewMode.single,
      showWhen: [NgxFormErrViewLogic.formSubmitted, NgxFormErrViewLogic.touched]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Configuration when using a component

You can override config options when using component
The names of the incoming parameters match the field name in the configuration

<ngx-form-err [control]="nameNgModel" mode="single" [showWhen]="['touched']"></ngx-form-err>

Error message customization

To customize validation error messages, reload NgxFormErrStorageFactory with your implementation, and be sure to implement from AbstractNgxFormErrStorageFactory.

The getErrorStorage method must be implemented, it must return an object of type ErrorGeneratorStorage

ErrorGeneratorStorage is an object whose keys are the name of the validator, and the value is a string or function to generate an error message. Depending on the type of validator, additional data will be passed as the first argument to the function to generate an error message.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {NgxFormErrModule, NgxFormErrStorageFactory} from 'ngx-form-err';
import {CustomFormErrStorageFactory} from "./custom-form-err-storage.factory";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxFormErrModule
  ],
  providers: [
    // Overloading the NgxFormErrStorageFactory standard class of your own implementation
    {
      provide: NgxFormErrStorageFactory,
      useClass: CustomFormErrStorageFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

import {Injectable} from '@angular/core';
import {AbstractNgxFormErrStorageFactory, ErrorGeneratorStorage} from 'ngx-form-err';

@Injectable()
export class CustomFormErrStorageFactory implements AbstractNgxFormErrStorageFactory {

  getErrorStorage(): ErrorGeneratorStorage {
    // Your logic for receiving and returning error messages
    return {
      required: 'My custom required error message',
      minlength: 'My min length message',
      maxlength: (data) => `The maximum length should be no more than ${data.requiredLength}`
    };
  }

}

Types and Interfaces

NgxFormErrConfig

NgxFormErrViewMode

Enum

NgxFormErrViewLogic

Enum, configuring error display logic

ErrorGeneratorStorage

A type that describes a storage object for validation error messages

export type ErrorGeneratorStorage = { [key: string]: ErrorGenerator };

ErrorGenerator

The type of single error message, can be a regular string or a function

export type ErrorGeneratorDynamic = (data: any) => string;
export type ErrorGenerator = ErrorGeneratorDynamic | string;