Form Validation in angular

Form Validation in angular 

Create angular application then 

      install - (npm i ng2-validation-manager --save)  in cmd

HTML

<div style="width:30%; margin-left:25%; border:1px solid #cdcdcd; padding:0px 50px 50px 50px;">

  <h1>Validation Manager</h1>

  <form [formGroup]="form.getForm()">

    <div class="width-100-per">

      <label>Name</label>

      <input type="text" placeholder="Name" formControlName="name">

      <span *ngIf="form.hasError('name')" class="error">

        {{form.getError('name')}}

      </span>

    </div>

    <div class="width-100-per">

      <label>email</label>

      <input type="email" placeholder="email" formControlName="email">

      <span *ngIf="form.hasError('email')" class="error">

        {{form.getError('email')}}

      </span>

    </div>

    <!-- <div class="width-100-per">

      <label>Date</label>

      <input type="date" placeholder="date" formControlName="date">

      <span *ngIf="form.hasError('date')" class="error">

        {{form.getError('date')}}

      </span>

    </div> -->

    <div class="width-100-per">

      <label>Mobile No</label>

      <input type="text" placeholder="Mobile No" formControlName="mobileNo">

      <span *ngIf="form.hasError('mobileNo')" class="error">

        {{form.getError('mobileNo')}}

      </span>

    </div>

    <div class="width-100-per">

      <label>Password</label>

      <input type="text" placeholder="Password" formControlName="password">

      <span *ngIf="form.hasError('password')" class="error">

        {{form.getError('password')}}

      </span>

    </div>

    <div class="width-100-per">

      <label>Repassword</label>

      <input type="password" placeholder="Repassword" formControlName="repassword">

      <span *ngIf="form.hasError('repassword')" class="error">

        {{form.getError('repassword')}}

      </span>

    </div>

    <div class="width-100-per">

      <label>Address</label>

      <input type="text" placeholder="Address" formControlName="address">

      <span *ngIf="form.hasError('address')" class="error">

        {{form.getError('address')}}

      </span>

    </div>

    <div class="clear"></div>

    <div style="text-align:center">

    <button type="reset" (click)="reset()">Reset</button>

    <button type="button" (click)="save(form)">Submit</button>

  </div>

  </form>

</div>

componts.ts

import { Component, OnInit } from '@angular/core';

import { ValidationManager } from "ng2-validation-manager";

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{

  form;

  ngOnInit() {

    this.form = new ValidationManager({

      'name': 'required|minLength:4|maxLength:12',

      'email': 'required|email',

      // 'date': 'required|date',

      'mobileNo': 'required|number|maxLength:10',

      'password': 'required|rangeLength:8,15',

      'repassword': 'required|equalTo:password',

      'address': 'required|maxLength:200'

    });

  }

  save() {

    if (this.form.isValid()) {

      alert('validation pass');

      this.form.reset();

    }  

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

css

.width-100-per{

    width: 100%;

    float: left;

    margin-bottom: 20px;

}

label{

    width: 40%;

    float: left;

    padding: 7px;

}

input{

    width: 50%;

    float: left;

    padding: 5px 10px;

    border: 1px solid #cdcdcd;

}

span{

    float: left;

    text-align: right;

    padding: 7px;

}

.error{

    color: #f00;

}

.clear{

    clear: both;

}

Output