FormControlValidation

A simple directive to display angular form validation errors.

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

• 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.