https://github.com/niyaznz/form-control-validation

FormControlValidation - a simple directive to display angular form validation errors.
https://github.com/niyaznz/form-control-validation

Last synced: 14 days ago
JSON representation

FormControlValidation - a simple directive to display angular form validation errors.

• Host: GitHub
• URL: https://github.com/niyaznz/form-control-validation
• Owner: NiyazNz
• License: mit
• Created: 2019-06-20T09:45:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T06:34:06.000Z (about 2 years ago)
• Last Synced: 2023-03-02T22:12:01.840Z (almost 2 years ago)
• Language: TypeScript
• Homepage: https://gitlab.com/Enzedd/form-control-validation
• Size: 1.74 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# FormControlValidation

A simple directive to display angular form validation errors.

[![npm version](https://img.shields.io/npm/v/@enzedd/form-control-validation.svg)](https://npmjs.com/package/@enzedd/form-control-validation "View on npm")

[![Gitlab pipeline status](https://img.shields.io/gitlab/pipeline/Enzedd/form-control-validation.svg)](https://gitlab.com/Enzedd/form-control-validation/pipelines)

[![coverage report](https://gitlab.com/Enzedd/form-control-validation/badges/master/coverage.svg)](https://gitlab.com/Enzedd/form-control-validation/commits/master)

```html

```

![form-control-validation](https://gitlab.com/Enzedd/form-control-validation/uploads/021f8e829c871927cb5de01c34b4876b/form-control-validation.png)

* 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](https://enzedd.gitlab.io/form-control-validation/)

* A simple example can be found under `src/app` directory of this repository.

## Getting started

### Step 1: Install `form-control-validation`:

npm

```shell

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

```

yarn

```shell

yarn add @enzedd/form-control-validation

```

### Step 2: Import `FormControlValidationModule` and angular `ReactiveFormsModule` modules:

```typescript

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)

```html

    

```

[Add validators](https://angular.io/guide/form-validation#reactive-form-validation) to your form controls 

### Step 4 (Optional): Configuration

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

```typescript

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](#step-4-optional-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](https://karma-runner.github.io).