sl-validator v0.0.4

SlValidator

This project is for validating forms in Angular. It applies common validations like required,email,number,max,min,pattern easily.

Demo

Please check basic usage here: https://stackblitz.com/edit/angular-ivy-uthg1s?file=src/app/app.component.html

Usage

Install: npm install sl-validator

Import to your app module

import { SlValidatorModule } from 'sl-validator';
@NgModule({
      imports:      [ SlValidatorModule ],
  })

SlValidatorComponent: Wrap your from element with sl-validator element.

<sl-validator (formSubmit)="onSubmit($event)" animate="true">
  <form>
    </form>
</sl-validator>

It takes the following input: getWholeFormData: boolean = false; // Get data from only slValidate field or all input elements

slValidateField Directive Apply the directive to any input field which should be validated.

<input [slValidateField] name="firstName" pattern="[\w]+" maxlength="10" minlength="5"  patternMismatchMessage='Can not contain special character' valueMissingMessage='Required Field' [(ngModel)]="firstName" id="firstName" type="text" required="required" />

It takes the following inputs for customizing error messages:

  badInputMessage: string;
  customErrorMessage: string;
  patternMismatchMessage: string;
  rangeOverflowMessage: string;
  rangeUnderflowMessage: string;
  stepMismatchMessage: string;
  tooLongMessage: string;
  tooShortMessage: string;
  typeMismatchMessage: string;
  validMessage: string;
  valueMissingMessage: string;
  placementSelector: string; // This is for configuring error message placement. By defaut it is 'div', meaing it will be placed to a sibling after finding the closest div parent.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.