Skip to content

Latest commit

 

History

History
114 lines (94 loc) · 4.89 KB

README.md

File metadata and controls

114 lines (94 loc) · 4.89 KB
Raw

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.