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

Table Examples

<style>

table, th, td

{

    margin: 10px 0;

    border: solid 1px #333;

    padding: 2px 4px;

    font: 15px Verdana;

}

th {

    font-weight:bold;

}

</style>

App.component.html

  <h1>

      {{ title }}!

  </h1>

  <table *ngIf="arrEmps">

      <tr>

        <th>ID</th>

        <th>Emp Name</th>

        <th>City</th>

        <th>State</th>

      </tr>    

      <tr *ngFor="let Emp of arrEmps">

        <td>{{Emp.ID}}</td>

        <td>{{Emp.Name}}</td>

        <td>{{Emp.City}}</td>

        <td>{{Emp.State}}</td>

      </tr>

  </table>

App.component.ts

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

import { HttpClient } from '@angular/common/http';

import { HttpErrorResponse } from '@angular/common/http';

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'Employee Table Example';

  constructor (private httpService: HttpClient) { }

  arrEmps: string [];

  ngOnInit () {

    this.httpService.get('./assets/Cities.json').subscribe(

      data => {

        this.arrEmps = data as string [];  // FILL THE ARRAY WITH DATA.

        //  console.log(this.arrEmps[1]);

      },

      (err: HttpErrorResponse) => {

        console.log (err.message);

      }

    );

  }

}

Cities.json

[{

    "ID": "001",

   "Name": "Emma",

    "City": "New York",

    "State": "New York"

},

{

    "ID": "002",

    "Name": "Liam",

    "City": "Los Angeles",

    "State": "California"

},

{

    "ID": "003",

    "Name": "William",

    "City": "Chicago",

    "State": "Illinois"

},

{

    "ID": "004",

    "Name": "James",

    "City": "Houston",

    "State": "Texas"

},

{

    "ID": "005",

    "Name": "Isabella",

    "City": "Philadelphia",

    "State": "Pennsylvania"

},

{

    "ID": "006",

    "Name": "Ava",

    "City": "Phoenix",

    "State": "Arizona"

},

{

    "ID": "007",

    "Name": "William",

    "City": "San Diego",

    "State": "Texas"

}]

app.module.ts

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

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

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

import { HttpClientModule } from '@angular/common/http';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }