NgxValidations

Forms bring life to our web applications. It’s how we capture user input and make our applications useful. In every scenario, developers end with writing a lot html code just to show the relative messages based on the type of input validation error. We have created a validation module which will have all these logic to validate the input and display relative message from it. This library is Ivy Compatible and is tested against an Angular 8, 9 app.

• It is developed using Angular >=9.0.0 and its newly introduced ng g library schematics.
• This library is part of NgDirectives project and it is generated with Angular CLI version 9.0.6.
• Library location: projects/ngxvalidations directory of this repository.

Validation List List

| Validators | Description |
| ----------------------| :---------------------------------------------: | | required | to validated and display required error | | minLength | to validated and display min length error | | maxLength | to validated and display max length error | | emailValidator | to validate if entered email is valid | | mobileValidator | to validate if entered email is valid | | postalCodeValidator | to validate if entered postal is valid (North America postal code) |

Upcoming validators

| selector | Description |
| ------------------------| :---------------------------------------------------------------: | | passwordStrength | it will check if password strength is strong or not | | passwordMatch | it will ccompare password and confirm password and display error if not matched | | dateComparison | it will validated that to date is greater than from date |

Examples/Demo

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

Installation

npm i ngx-validations

Usage

1. Register the NgxValidationsModule in your app module.

import { NgxValidationsModule } from "ng-validations";

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NgxValidationsModule } from "ngx-validations";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
 declarations: [AppComponent],
 imports: [
   BrowserModule,
   CommonModule,
   ReactiveFormsModule,
   AppRoutingModule,
   NgxValidationsModule,
 ],
 providers: [],
 bootstrap: [AppComponent],
})
export class AppModule {}

2. Use service (NgxValidationsService) to get additional method of validaion in your component.

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { NgxValidationsService } from "ngx-validations";

@Component({
  selector: "ngx-val-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  userForm: FormGroup;
  title = "Ngx Validations Library";
  constructor(
    private formBuilder: FormBuilder,
    private validationService: NgxValidationsService
  ) {}

  createForm() {
    this.userForm = this.formBuilder.group({
      FirstName: [
        "",
        [
          Validators.required,
          Validators.minLength(2),
          Validators.maxLength(35),
        ],
      ],
      LastName: [
        "",
        [
          Validators.required,
          Validators.minLength(2),
          Validators.maxLength(35),
        ],
      ],
      Email: ["", [Validators.required, this.validationService.emailValidator]],
      Mobile: [
        "",
        [Validators.required, this.validationService.mobileValidator],
      ],
      PostalCode: [
        "",
        [Validators.required, this.validationService.postalCodeValidator],
      ],
    });
  }

  reset() {
    this.createForm();
  }
  ngOnInit() {
    this.createForm();
  }
}

3. Use custom element <ngx-validation-message> to display all error messages for a contol.

      <form [formGroup]="userForm">
        <div class="form-row mt-4">
          <div class="col-sm-6 pb-3">
            <label for="exampleFirst">First Name</label>
            <input type="text" class="form-control" formControlName="FirstName">
            <ngx-validation-message [control]="userForm.controls.FirstName"></ngx-validation-message>
          </div>
          <div class="col-sm-6 pb-3">
            <label for="exampleLast">Last Name</label>
            <input type="text" class="form-control" formControlName="LastName">
            <ngx-validation-message [control]="userForm.controls.LastName"></ngx-validation-message>
          </div>
          <div class="col-sm-5 pb-3">
            <label for="exampleAccount">Email </label>
            <input type="text" class="form-control" formControlName="Email">
            <ngx-validation-message [control]="userForm.controls.Email"></ngx-validation-message>
          </div>
          <div class="col-sm-3 pb-3">
            <label for="exampleCtrl">Mobile #</label>
            <input type="text" class="form-control" formControlName="Mobile">
            <ngx-validation-message [control]="userForm.controls.Mobile"></ngx-validation-message>
          </div>
          <div class="col-sm-4 pb-3">
            <label for="exampleZip">Postal Code</label>
            <input type="text" class="form-control" formControlName="PostalCode">
            <ngx-validation-message [control]="userForm.controls.PostalCode"></ngx-validation-message>
          </div>
        </div>
      </form>

Running the example in local env

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

Build the NgxValidations module

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

Credits

I want to thanks entire Angular team for creating this awesome framework.