@enzedd/form-control-validation
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    FormControlValidation

    A simple directive to display angular form validation errors.

    npm version Gitlab pipeline status coverage report

    <input type="text" formControlName="lastName" nzFormControlValidation>

    form-control-validation

    • No messy HTML markup is required for field errors; instead, one directive is enough
    • Humanized messages for built-in angular validators
    • Globally customizable error messages for builtin and user validators
    • Per control customizable error messages
    • Custom component can be provided to render validation errors

    Examples/Demo

    • Demo
    • A simple example can be found under src/app directory of this repository.

    Getting started

    Step 1: Install form-control-validation:

    npm

    npm install --save @enzedd/form-control-validation

    yarn

    yarn add @enzedd/form-control-validation

    Step 2: Import FormControlValidationModule and angular ReactiveFormsModule modules:

    import {ReactiveFormsModule} from '@angular/forms';
    import {FormControlValidationModule} from '@enzedd/form-control-validation';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        ...
        ReactiveFormsModule,
        FormControlValidationModule
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    Step 3: Add nzFormControlValidation directive to form control (input)

    <form [formGroup]="form">
        <input type="text" formControlName="firstName" nzFormControlValidation>
    </form>

    Add validators to your form controls

    Step 4 (Optional): Configuration

    You can also set error messages by providing custom factory for FORM_CONTROL_ERRORS service.

    import {FORM_CONTROL_ERRORS, FormControlErrors} from '@enzedd/form-control-validation';
    
    export function formControlErrorsFactory(): FormControlErrors {
      const _formErrors = {
        ...
        minlength: ({requiredLength, actualLength}) => `Expected length is at least ${requiredLength}`,
      };
      return _formErrors;
    }
    
    @NgModule({
      ...
      providers: [
        {provide: FORM_CONTROL_ERRORS, useFactory: formControlErrorsFactory}
      ],
    }

    API

    Inputs

    Input Type Default Required Description
    [nzFormControlValidation] IFormControlValidationComponent FormControlValidationComponent yes (value not required) Custom component can be provided to render formControl humanized validation error
    [minError] string null no Error message for Validators.min1
    [maxError] string null no Error message for Validators.max1
    [requiredError] string null no Error message for Validators.required1
    [requiredTrueError] string null no Error message for Validators.requiredTrue1
    [emailError] string null no Error message for Validators.email1
    [minlengthError] string null no Error message for Validators.minlength1
    [maxlengthError] string null no Error message for Validators.maxlength1
    [patternError] string null no Error message for Validators.pattern1
    [validatorErrors] Object null no Error messages for other validators. Has lower priority than more specific error messages and can be overwritten by them

    1 If error message not specified, message from global configuration is used. See configuration section.

    Development

    Library location is under projects/form-control-validation directory of this repository.

    Demo application is under src directory of this repository.

    Development server

    Run npm run lib:watch to incrementally build library as a background process in your dev environment

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Build library

    Run npm run lib:build to build the project. The build artifacts will be stored in the dist/ directory.

    Publishing

    After building your library, go to the dist folder cd dist/form-control-validation and run npm publish.

    Running unit tests

    Run npm run lib:test to execute the library unit tests via Karma.

    Install

    npm i @enzedd/form-control-validation

    DownloadsWeekly Downloads

    6

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    154 kB

    Total Files

    25

    Last publish

    Collaborators

    • niyaz