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 {}
 

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();
  }
}
 

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