TechGlobo

Home Blog

Angular 2 Customized Grid Example

August 30, 2017

Introduction:
Explained an example to create the customized grid with column sorting mechanism.

First created a grid component.
angular-grid.ts:

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

@Component({
selector: 'angular-grid',
templateUrl: './angular-grid.html',
styleUrls: [
'../../../node_modules/bootstrap/dist/css/bootstrap.css',
'./angular-grid.css'
]
})

export class AngularGridComponent implements OnInit {
	ngOnInit(){
		
	}
}

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

@Component({

selector: 'angular-grid',

templateUrl: './angular-grid.html',

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css',

'./angular-grid.css'

]

})

export class AngularGridComponent implements OnInit {

ngOnInit(){

}

Then created a template for table.

angular-grid.html:

<h4>Custom Angular grid </h4>
 <table class="table table-striped table-bordered">
    <thead >
      <tr>
        <th *ngFor="let list of headerData">
        	{{list.headerName}}
        <div class="grid-icon">
        	<span class="glyphicon glyphicon-arrow-up"  (click)="sortyAsc(list.field)"></span>
        	<span class="glyphicon glyphicon-arrow-down"  (click)="sortDesc(list.field)"></span>
        	<span class="glyphicon glyphicon glyphicon-remove"  (click)="sortReset()"></span>
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of rowData">
        <td *ngFor="let list of headerData">{{data[list.field]}}</td>
      </tr>
    </tbody>
  </table>

<h4>Custom Angular grid </h4>

<tr>

</div>

</th>

</tr>

</thead>

<tbody>

<td *ngFor="let list of headerData">{{data[list.field]}}</td>

</tr>

</tbody>

</table>

Add Input data properties named headerData and rowData to the angular grid component. So that this component can get table column header data and row data from other component where it’s called. Also defined a property named actualData, in order to store the actual input row data. In the below code snippet used Object.assign property to copy only data not the reference.

Updated angular-grid.ts:

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

@Component({
  selector: 'angular-grid',
  templateUrl: './angular-grid.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css',
    './angular-grid.css'
  ]
})
export class AngularGridComponent implements OnInit{
	private actualData:Array<any>;
	@Input() rowData;
	@Input() headerData;
	
	ngOnInit(){
		this.actualData = Object.assign([], this.rowData);
	}
}

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

@Component({

selector: 'angular-grid',

templateUrl: './angular-grid.html',

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css',

'./angular-grid.css'

]

})

export class AngularGridComponent implements OnInit{

private actualData:Array<any>;

@Input() rowData;

@Input() headerData;

ngOnInit(){

this.actualData = Object.assign([], this.rowData);

}

For sort ascending, sort descending and reset mechanism added following methods with normal java script sorting logic.

Updated angular-grid.ts:

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

@Component({
  selector: 'angular-grid',
  templateUrl: './angular-grid.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css',
    './angular-grid.css'
  ]
})
export class AngularGridComponent implements OnInit{
	private actualData:Array<any>;
	@Input() rowData;
	@Input() headerData;
	
	ngOnInit(){
		this.actualData = Object.assign([], this.rowData);
	}
	sortyAsc = function(headName){
		function compare(arg1,arg2) {
		  if (arg1[headName] < arg2[headName])
		    return -1;
		  if (arg1[headName] > arg2[headName])
		    return 1;
		  return 0;
		}

		this.rowData.sort(compare);
	}
	sortDesc = function(headName){
		function compare(arg1,arg2) {
		  if (arg1[headName] > arg2[headName])
		    return -1;
		  if (arg1[headName] < arg2[headName])
		    return 1;
		  return 0;
		}

		this.rowData.sort(compare);
	}
	sortReset= function(){
		this.rowData = Object.assign([], this.actualData);
	} 

}

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

@Component({

selector: 'angular-grid',

templateUrl: './angular-grid.html',

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css',

'./angular-grid.css'

]

})

export class AngularGridComponent implements OnInit{

private actualData:Array<any>;

@Input() rowData;

@Input() headerData;

ngOnInit(){

this.actualData = Object.assign([], this.rowData);

}

sortyAsc = function(headName){

function compare(arg1,arg2) {

if (arg1[headName] < arg2[headName])

return -1;

if (arg1[headName] > arg2[headName])

return 1;

return 0;

}

this.rowData.sort(compare);

}

sortDesc = function(headName){

function compare(arg1,arg2) {

if (arg1[headName] > arg2[headName])

return -1;

if (arg1[headName] < arg2[headName])

return 1;

return 0;

}

this.rowData.sort(compare);

}

sortReset= function(){

this.rowData = Object.assign([], this.actualData);

}

Now Added little styling to sorting glyph icons.

Updated angular-grid.css:

.grid-icon{
	display: inline-block;
}
.glyphicon-arrow-down ,.glyphicon-remove,.glyphicon-arrow-up{
	font-size: x-small;
}

.grid-icon{

display: inline-block;

}

.glyphicon-arrow-down ,.glyphicon-remove,.glyphicon-arrow-up{

font-size: x-small;

}

Now our angular grid component is ready to use from other components by simply calling with selector name and passing appropriate table inputs.

app.component.html:

<angular-grid [rowData]="rowData" [headerData]="headerData"></angular-grid>

1	<angular-grid [rowData]="rowData" [headerData]="headerData"></angular-grid>

In app component added some mock data for table row details and table column names.

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
  	'./app.component.css'
  ]
})
export class AppComponent implements OnInit {
	headerData: Array<any>;
	rowData: Array<any>;
	ngOnInit(){
		this.headerData = [
		    {headerName: "Make", field: "make"},
		    {headerName: "Model", field: "model"},
		    {headerName: "Price", field: "price"}
		];

		this.rowData = [
		    {model: "Celica", price: 35000,make: "Toyota"},
		    {make: "Ford", model: "Mondeo", price: 32000},
		    {make: "Porsche", model: "Boxter", price: 72000}
		];
	}

}

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

@Component({

selector: 'app-root',

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

styleUrls: [

'./app.component.css'

]

})

export class AppComponent implements OnInit {

headerData: Array<any>;

rowData: Array<any>;

ngOnInit(){

this.headerData = [

{headerName: "Make", field: "make"},

{headerName: "Model", field: "model"},

{headerName: "Price", field: "price"}

];

this.rowData = [

{model: "Celica", price: 35000,make: "Toyota"},

{make: "Ford", model: "Mondeo", price: 32000},

{make: "Porsche", model: "Boxter", price: 72000}

];

}

Angular 2 – Basic Login Example

Prashanti

August 18, 2017

Introduction:
In this post, explained the basic login example for beginners . Create a login page like below.

Login/login.component.html:

<div class="col-sm-6 col-sm-6 col-sm-offset-3">
	<h3>Login Form</h3>
	<form class="form-horizontal" #loginForm="ngForm">
		<div class="form-group">
		    <label for="username" class="col-sm-2 control-label">User Name</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="username" placeholder="User Name" [(ngModel)]="username" required>
		    </div>
	  </div>
	  <div class="form-group">
		    <label for="password" class="col-sm-2 control-label">Password</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
		    </div>
	  </div>
	  <div class="form-group">
	  	<div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="login()">Login</button>
	    </div>
	  </div>
	</form>
</div>

<h3>Login Form</h3>

</div>

<label for="password" class="col-sm-2 control-label">Password</label>

</div>

<button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid" (click)="login()">Login</button>

</div>

</form>

</div>

Create a component for the login page and defined properties username and password.And also added login method to handle login event.
Login/login.component.ts:

@Component({
  selector: 'login-component',
  templateUrl: './login.component.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css'
  ]
})
export class loginComponent {
	private username;
	private password;

	login():void{
		if(this.username == "test" && this.password == "test"){
			alert("succesfully logged in");
		}
		else {
			alert("Give username and password 'test'");
		}
	}
}

@Component({

selector: 'login-component',

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

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css'

]

})

export class loginComponent {

private username;

private password;

if(this.username == "test" && this.password == "test"){

alert("succesfully logged in");

}

else {

alert("Give username and password 'test'");

}

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
  	'./app.component.css',
    '../../node_modules/bootstrap/dist/css/bootstrap.css'
  ]
})
export class AppComponent {
}

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

@Component({

selector: 'app-root',

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

styleUrls: [

'./app.component.css',

'../../node_modules/bootstrap/dist/css/bootstrap.css'

]

})

export class AppComponent {

}

app.component.html:

<login-component></login-component>

1	<login-component></login-component>

Angular2 CRUD App – with JSON, PHP

Prashanti

August 18, 2017

Introduction:
In this post, explained a example on the Angular 2 CRUD(Create, Read, Update and Delete) opearations using PhP.
Following prerequisites are required.
1. Angular 2 Basis setup
2. MAMP Server(WAMP for windows) to run PhP code.

In this example, we will read list of records from JSON file and then show it in a table. User can search,edit or delete the records. User also can create new record. Create two directories inside angular 2 app folder named Dashboard and User .

Create a interface to define user records properties like below and export it.

User/user.ts:

export interface User {
	id:number;
	name:string;
	phoneno:string;
	email:string;
}

export interface User {

id:number;

name:string;

phoneno:string;

email:string;

}

Keep the following files on MAMP server and run the server.

htdocs/www/userData.json:

//Mock data
[
	{"id":1,"name":"missi","phoneno":"22222","email":"rama@gmail.com"},
	{"id":2,"name":"devi","phoneno":"999999","email":"devi@gmail.com"},
	{"id":3,"name":"naga","phoneno":"6666666","email":"nara@gmail.com"},
	{"id":4,"name":"srvanthi","phoneno":"777777","email":"sravanthi@gmial.com"}
]

//Mock data

[

{"id":1,"name":"missi","phoneno":"22222","email":"rama@gmail.com"},

{"id":2,"name":"devi","phoneno":"999999","email":"devi@gmail.com"},

{"id":3,"name":"naga","phoneno":"6666666","email":"nara@gmail.com"},

{"id":4,"name":"srvanthi","phoneno":"777777","email":"sravanthi@gmial.com"}

]

htdocs/www/user.php:

<?php 
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    header('Access-Control-Allow-Methods: GET, POST, PUT');
?>

<?php
   function getUser() {
        $data = file_get_contents("userData.json");
        $phpObj = json_decode($data, true);
        $jsonObj = json_encode($phpObj, true);
        echo $jsonObj;
    } 

    function addUser() {
         $postdata = file_get_contents("php://input");
         $phpObj = json_decode($postdata);
         $data = file_get_contents("userData.json");
         $phpuserDetails = json_decode($data, true);

         array_push($phpuserDetails,$phpObj);
         file_put_contents('userData.json', json_encode($phpuserDetails));
         echo json_encode($phpuserDetails);
         
    }

    function updateUser() {
        $postdata = file_get_contents("php://input");
        $phpObj = json_decode($postdata, true);
        $data = file_get_contents("userData.json");
        $phpuserDetails = json_decode($data, true);
        
         foreach($phpuserDetails as $key => $user){
            if($user['id'] == $phpObj['id']){
                $phpuserDetails[$key] = $phpObj;
            }
        }
        file_put_contents('userData.json', json_encode($phpuserDetails));
        echo json_encode($phpuserDetails);
    }

    function deleteUser(){
       $deleteId = $_GET["id"];
       $data = file_get_contents("userData.json");
       $phpuserDetails = json_decode($data, true);
        foreach($phpuserDetails as $key => $user){
            if($user['id'] == $deleteId){   
                 array_splice($phpuserDetails, $key, 1);
            }
        } 
        file_put_contents('userData.json', json_encode($phpuserDetails));
        echo json_encode($phpuserDetails);

    }
  	/*getting action type from the url and calling respective function*/
     $action  = $_GET["action"];

   if($action == "getUser"){
        getUser();
   }else if($action == "addUser") {
        addUser();
   } else if($action == 'updateUser'){
        updateUser();
   } else {
     deleteUser();
   }
?>

<?php

header('Access-Control-Allow-Origin: *');

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

header('Access-Control-Allow-Methods: GET, POST, PUT');

<?php

function getUser() {

$data = file_get_contents("userData.json");

$phpObj = json_decode($data, true);

$jsonObj = json_encode($phpObj, true);

echo $jsonObj;

}

function addUser() {

$postdata = file_get_contents("php://input");

$phpObj = json_decode($postdata);

$data = file_get_contents("userData.json");

$phpuserDetails = json_decode($data, true);

array_push($phpuserDetails,$phpObj);

file_put_contents('userData.json', json_encode($phpuserDetails));

echo json_encode($phpuserDetails);

}

function updateUser() {

$postdata = file_get_contents("php://input");

$phpObj = json_decode($postdata, true);

$data = file_get_contents("userData.json");

$phpuserDetails = json_decode($data, true);

foreach($phpuserDetails as $key => $user){

if($user['id'] == $phpObj['id']){

$phpuserDetails[$key] = $phpObj;

}

file_put_contents('userData.json', json_encode($phpuserDetails));

echo json_encode($phpuserDetails);

}

function deleteUser(){

$deleteId = $_GET["id"];

$data = file_get_contents("userData.json");

$phpuserDetails = json_decode($data, true);

foreach($phpuserDetails as $key => $user){

if($user['id'] == $deleteId){

array_splice($phpuserDetails, $key, 1);

}

file_put_contents('userData.json', json_encode($phpuserDetails));

echo json_encode($phpuserDetails);

}

/*getting action type from the url and calling respective function*/

$action = $_GET["action"];

if($action == "getUser"){

getUser();

}else if($action == "addUser") {

addUser();

} else if($action == 'updateUser'){

updateUser();

} else {

deleteUser();

}

Create a template and component for dashboard page is like below.
Dashboard/dashboard.component.html:

<!--This section is to show message , when no records are found in backend-->
<div class="panel panel-default" *ngIf="users.length == 0">
  <div class="panel-heading"> <p>No User Details are available</p></div>
  <div class="panel-body" style="float:right">
  	<button class="btn btn-primary" (click)="isCreates=true">Create User</button>
  </div>
</div>

<!--This section is to show user records in the table, when the list of user records are exist-->
<div class="panel panel-primary" *ngIf="users.length > 0">
	<div class="panel-heading"> 
		<h4 style="display:inline-block">Users List</h4>
	</div>	
	<div class="panel-body">
		<!--Added Serach box, to serach records from the table-->
		<div class="form-group">
	    <label for="search" class="col-sm-1 control-label">Search</label>
	    <div class="col-sm-4">
	      <input type="search" class="form-control" name="search" [(ngModel)]="serachStr" (ngModelChange)="filterTable(serachStr)">	
	    </div>
	  </div>
		<table class="table table-striped">
		    <thead>
		      <tr>
		        <th>User Id</th>
		        <th>Name</th>
		        <th>Phone Number</th>
		        <th>Email Id</th>
		        <th>Action</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr *ngFor="let user of selectedUsers">
		        <td>{{834}}{{user.id}}</td>
		        <td>{{user.name}}</td>
		        <td>{{user.phoneno}}</td>
		        <td>{{user.email}}</td>
		        <td>
		        	<!--Added buttons to edit user and delete user-->
		        	<button class="btn btn-sm btn-danger" (click)="deleteUser(user.id)">delete</button>
		        	<button class="btn btn-sm btn-primary" (click)="isEdits=true;editUserData = user">Edit</button> </td>
		      </tr>
		    </tbody>
		</table>
		<button style="float:right" class="btn btn-success btn-primary" (click)="isCreates=true">Create New User</button>
		<button type="submit" class="btn btn-default" (click)="isCreates = false">Cancel</button>
	</div>
</div>

<div class="panel-heading"> <p>No User Details are available</p></div>

<button class="btn btn-primary" (click)="isCreates=true">Create User</button>

</div>

<h4 style="display:inline-block">Users List</h4>

</div>

<label for="search" class="col-sm-1 control-label">Search</label>

</div>

<thead>

<tr>

<th>Phone Number</th>

<th>Email Id</th>

<th>Action</th>

</tr>

</thead>

<tbody>

<td>{{user.phoneno}}</td>

<td>{{user.email}}</td>

<td>

<button class="btn btn-sm btn-danger" (click)="deleteUser(user.id)">delete</button>

</tr>

</tbody>

</table>

<button style="float:right" class="btn btn-success btn-primary" (click)="isCreates=true">Create New User</button>

<button type="submit" class="btn btn-default" (click)="isCreates = false">Cancel</button>

</div>

In the below dashboard component, we have injected the service named UserService and accessing respective service methods. We have added this
service to reduce the component logic.

Dashboard/dashboard.component.ts:

import { Component , OnInit} from '@angular/core';
import {  Router } from '@angular/router';
import { User } from 'app/User/user';
import { UserService } from 'app/User/user.service';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],
  providers:[UserService]
})
export class dashboardComponent implements OnInit{
	users:User[] = [];
	selectedUsers:User[]=[];
	returnIntems:User[];
	isCreates:boolean = false;
	isEdits:boolean = false;
	/*Inject dependencies in constructor function as a input params*/
	constructor(public router: Router, private userService : UserService) {}

	ngOnInit(){
		/*getting user details on component intiation*/
		this.userService
			._getUser()
			.then(users => {this.users = users; this.selectedUsers = users});
	}

	userAdded(users:User[]){
		this.isCreates = false;
		this.isEdits = false;
		this.users = users;
		this.selectedUsers = users;
	}
	deleteUser(id){
		/*Delete User handlear*/
		this.userService
			._deleteUser(id)
			.then(users => {this.users = users; this.selectedUsers = users})
	}

	/*Search box handler*/
	filterTable(input) {
		this.returnIntems = [];
		input.toLocaleLowerCase();
		this.users.filter((tag) => {

			if(tag.name.toLocaleLowerCase().indexOf(input) >= 0 || 
				tag.phoneno.toLocaleLowerCase().indexOf(input) >= 0 || 
				tag.email.toLocaleLowerCase().indexOf(input) >= 0){
				this.returnIntems.push(tag);
			}
		});

		this.selectedUsers = this.returnIntems;
	}
}

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

import { Router } from '@angular/router';

import { User } from 'app/User/user';

import { UserService } from 'app/User/user.service';

@Component({

selector: 'dashboard',

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

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css'

providers:[UserService]

})

export class dashboardComponent implements OnInit{

users:User[] = [];

selectedUsers:User[]=[];

returnIntems:User[];

isCreates:boolean = false;

isEdits:boolean = false;

/*Inject dependencies in constructor function as a input params*/

constructor(public router: Router, private userService : UserService) {}

ngOnInit(){

/*getting user details on component intiation*/

this.userService

._getUser()

.then(users => {this.users = users; this.selectedUsers = users});

}

userAdded(users:User[]){

this.isCreates = false;

this.isEdits = false;

this.users = users;

this.selectedUsers = users;

}

deleteUser(id){

/*Delete User handlear*/

this.userService

._deleteUser(id)

.then(users => {this.users = users; this.selectedUsers = users})

}

/*Search box handler*/

filterTable(input) {

this.returnIntems = [];

input.toLocaleLowerCase();

this.users.filter((tag) => {

if(tag.name.toLocaleLowerCase().indexOf(input) >= 0 ||

tag.phoneno.toLocaleLowerCase().indexOf(input) >= 0 ||

tag.email.toLocaleLowerCase().indexOf(input) >= 0){

this.returnIntems.push(tag);

}

});

this.selectedUsers = this.returnIntems;

}

Create a user service file and add methods to do CRUD operations by Http call.
User/user.service.ts:

User/user.service.ts:
import { Injectable } from '@angular/core';
import { Http,Headers }       from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

/*Importing user interface to define user class behaviour*/
import {User} from './user';

@Injectable()
export class UserService {

  private headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
                                });

  constructor(private http: Http) {}

  _getUser(): Promise<User[]> {
    return this.http
               .get('http://localhost:8888/www/user.php?action=getUser')
               .toPromise()
               .then(this.handleSuccess)
               .catch(this.handleError);

  }

  _addUser(user:User):Promise<User[]> {
    console.log(user);
    return this.http
               .post('http://localhost:8888/www/user.php?action=addUser',user, {headers: this.headers})
               .toPromise()
               .then(this.handleSuccess)
               .catch(this.handleError);
  }

  _deleteUser(id:number):Promise<User[]> {
      return this.http
                 .post('http://localhost:8888/www/user.php?action=deleteUser&id='+id, {headers: this.headers}) 
                 .toPromise()
                 .then(this.handleSuccess)
                 .catch(this.handleError);
  }

  _editUser(user:User):Promise<User[]> {
    return this.http
               .post('http://localhost:8888/www/user.php?action=updateUser',user, {headers: this.headers})
               .toPromise()
               .then(this.handleSuccess)
               .catch(this.handleError);
  }

/*Http Ajax call success handler*/
  private handleSuccess(data){
    return data.json() as User[];
  }
 /*Http Ajax call error handler*/
  private handleError(error: any): Promise<any> {
     console.error('An error occurred', error);
     return Promise.reject(error.message || error);
  }
}

User/user.service.ts:

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

import { Http,Headers } from '@angular/http';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/toPromise';

/*Importing user interface to define user class behaviour*/

import {User} from './user';

@Injectable()

export class UserService {

private headers = new Headers({ 'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'

});

constructor(private http: Http) {}

_getUser(): Promise<User[]> {

return this.http

.get('http://localhost:8888/www/user.php?action=getUser')

.toPromise()

.then(this.handleSuccess)

.catch(this.handleError);

}

_addUser(user:User):Promise<User[]> {

console.log(user);

return this.http

.post('http://localhost:8888/www/user.php?action=addUser',user, {headers: this.headers})

.toPromise()

.then(this.handleSuccess)

.catch(this.handleError);

}

_deleteUser(id:number):Promise<User[]> {

return this.http

.post('http://localhost:8888/www/user.php?action=deleteUser&id='+id, {headers: this.headers})

.toPromise()

.then(this.handleSuccess)

.catch(this.handleError);

}

_editUser(user:User):Promise<User[]> {

return this.http

.post('http://localhost:8888/www/user.php?action=updateUser',user, {headers: this.headers})

.toPromise()

.then(this.handleSuccess)

.catch(this.handleError);

}

/*Http Ajax call success handler*/

private handleSuccess(data){

return data.json() as User[];

}

/*Http Ajax call error handler*/

private handleError(error: any): Promise<any> {

console.error('An error occurred', error);

return Promise.reject(error.message || error);

}

Create a template and component for create user and edit user like below.
User/createUser.component.html:

<div class="col-sm-6 col-sm-6 col-sm-offset-3">
    <form class="form-horizontal" novalidate #createUserForm="ngForm">
    <div class="form-group">
      <label for="id" class="col-sm-2 control-label">User id</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="id" [(ngModel)]="userObj.id" disabled>  
      </div>
    </div>
    <div class="form-group">
      <label for="name1" class="col-sm-2 control-label">User Name</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="name" placeholder="User Name" [(ngModel)]="userObj.name"  #name1="ngModel" required>
        <div  *ngIf="name1.errors && (name1.dirty || name1.touched)"> 
          <span class="errorMsg"  [hidden]="!name1.errors.required" style="color:red"> Name is required</span>
        </div>  
      </div>
    </div>
    <div class="form-group">
      <label for="number" class="col-sm-2 control-label">Phone No</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="number" placeholder="Phone no" [(ngModel)]="userObj.phoneno" #number="ngModel" required>
         <div  *ngIf="number.errors && (number.dirty || number.touched)">
          <span class="errorMsg" [hidden]="!number.errors.required" style="color:red">Mobile number is required</span>
          </div>
      </div>
    </div>
    <div class="form-group">
      <label for="emailId" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" name="email" placeholder="Email" [(ngModel)]="userObj.email" #emailId="ngModel" required>
         <div  *ngIf="emailId.errors && (emailId.dirty || emailId.touched)">
         <span class="errorMsg" style="color:red" [hidden]="!emailId.errors.required">Email Id is required</span>
         </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" [disabled]="!createUserForm.form.valid" (click)="addUser()">Create User</button>
      </div>
    </div>
    </form>
  </div>

</div>

<span class="errorMsg" [hidden]="!name1.errors.required" style="color:red"> Name is required</span>

</div>

<label for="number" class="col-sm-2 control-label">Phone No</label>

<span class="errorMsg" [hidden]="!number.errors.required" style="color:red">Mobile number is required</span>

</div>

<label for="emailId" class="col-sm-2 control-label">Email</label>

<span class="errorMsg" style="color:red" [hidden]="!emailId.errors.required">Email Id is required</span>

</div>

<button type="submit" class="btn btn-default" [disabled]="!createUserForm.form.valid" (click)="addUser()">Create User</button>

</div>

</form>

</div>

User/createUser.component.ts:

import { Component,Input,Output,OnInit,EventEmitter } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'create-user',
  templateUrl:'./createUser.component.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],
  providers:[UserService]
})

export class CreateUserComponent implements OnInit{
  private userObj:User;
  @Input() userData: User[];
  /*Added event emitter for parent child component communication*/
  @Output() userAdded = new EventEmitter<User[]>();

  ngOnInit(){
    this.userObj = <User>{ id: (this.userData.length+1) };
  }
  constructor(private userService : UserService){}
  addUser() {
    this.userService
      ._addUser(this.userObj)
      .then(users => this.userAdded.emit(users));
  }
 
}

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

import { UserService } from './user.service';

import { User } from './user';

@Component({

selector: 'create-user',

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

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css'

providers:[UserService]

})

export class CreateUserComponent implements OnInit{

private userObj:User;

@Input() userData: User[];

/*Added event emitter for parent child component communication*/

@Output() userAdded = new EventEmitter<User[]>();

ngOnInit(){

this.userObj = <User>{ id: (this.userData.length+1) };

}

constructor(private userService : UserService){}

addUser() {

this.userService

._addUser(this.userObj)

.then(users => this.userAdded.emit(users));

}

User/editUser.component.html:

	<div class="col-sm-6 col-sm-6 col-sm-offset-3">
		<form class="form-horizontal" novalidate #editUserForm="ngForm">
	  <div class="form-group">
	    <label for="id" class="col-sm-2 control-label">User id</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" name="id" [(ngModel)]="userObj.id" disabled>	
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="name1" class="col-sm-2 control-label">User Name</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" name="name" placeholder="User Name" [(ngModel)]="userObj.name"  #name1="ngModel" required>
	      <div  *ngIf="name1.errors && (name1.dirty || name1.touched)"> 
	      	<span class="errorMsg"  [hidden]="!name1.errors.required" style="color:red"> Name is required</span>
	      </div>	
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="number" class="col-sm-2 control-label">Phone No</label>
	    <div class="col-sm-10">
	      <input type="text" class="form-control" name="number" placeholder="Phone no" [(ngModel)]="userObj.phoneno" #number="ngModel" required>
	       <div  *ngIf="number.errors && (number.dirty || number.touched)">
	        <span class="errorMsg" [hidden]="!number.errors.required" style="color:red">Mobile number is required</span>
	        </div>
	    </div>
	  </div>
	  <div class="form-group">
	    <label for="emailId" class="col-sm-2 control-label">Email</label>
	    <div class="col-sm-10">
	      <input type="email" class="form-control" name="email" placeholder="Email" [(ngModel)]="userObj.email" #emailId="ngModel" required>
	       <div  *ngIf="emailId.errors && (emailId.dirty || emailId.touched)">
	       <span class="errorMsg" style="color:red" [hidden]="!emailId.errors.required">Email Id is required</span>
	       </div>
	    </div>
	  </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-default" [disabled]="!editUserForm.form.valid" (click)="editUser()">Edit User</button>
	    </div>
	  </div>
		</form>
	</div>

</div>

<span class="errorMsg" [hidden]="!name1.errors.required" style="color:red"> Name is required</span>

</div>

<label for="number" class="col-sm-2 control-label">Phone No</label>

<span class="errorMsg" [hidden]="!number.errors.required" style="color:red">Mobile number is required</span>

</div>

<label for="emailId" class="col-sm-2 control-label">Email</label>

<span class="errorMsg" style="color:red" [hidden]="!emailId.errors.required">Email Id is required</span>

</div>

</div>

</form>

</div>

User/editUser.component.ts:

import { Component,Input,Output,OnInit,EventEmitter } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'edit-user',
  templateUrl:'./editUser.component.html',
  styleUrls: [
    '../../../node_modules/bootstrap/dist/css/bootstrap.css'
  ],
  providers:[UserService]
})

export class EditUserComponent implements OnInit{
	private userObj:User;
	@Input() editUserData: User;
	@Output() userUpdated = new EventEmitter<User[]>();

	ngOnInit(){
		this.userObj = this.editUserData;
	}
	
	constructor(private userService : UserService){}
	editUser() {
		this.userService
			._editUser(this.userObj)
			.then(users => this.userUpdated.emit(users));
	}
}

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

import { UserService } from './user.service';

import { User } from './user';

@Component({

selector: 'edit-user',

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

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css'

providers:[UserService]

})

export class EditUserComponent implements OnInit{

private userObj:User;

@Input() editUserData: User;

@Output() userUpdated = new EventEmitter<User[]>();

ngOnInit(){

this.userObj = this.editUserData;

}

constructor(private userService : UserService){}

editUser() {

this.userService

._editUser(this.userObj)

.then(users => this.userUpdated.emit(users));

}

Add above created components to the dashboard page on condition based like below.
Updated Dashboard/dashboard.component.html:

<create-user *ngIf="isCreates" [userData]="users" (userAdded)="userAdded($event)"></create-user>
<edit-user *ngIf="isEdits" [editUserData]="editUserData" (userUpdated)="userAdded($event)"></edit-user>

1 2	<create-user ngIf="isCreates" [userData]="users" (userAdded)="userAdded($event)"></create-user> <edit-user ngIf="isEdits" [editUserData]="editUserData" (userUpdated)="userAdded($event)"></edit-user>

Angular 2 Custom Directive – Form Validation

Prashanti

August 2, 2017

Introduction:
Form field validations are very important to restrict from user to enter invalid data on client side. In this post explained simple example to validate form input fields using custom directive. And also explained, injection of bootstrap library to the template for form styling.

Create a form template file and avoid default HTML 5 validations by adding form property novalidate.

forms.component.html :

JavaScript

<div class="col-sm-6 col-sm-6 col-sm-offset-3">
<h3>Register User Form</h3>
<form class="form-horizontal" novalidate>
  <div class="form-group">
    <label for="uname" class="col-sm-2 control-label">User Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="uname" placeholder="User Name" [(ngModel)]="uname" required>
      <span class="errorMsg" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <label for="mobileno" class="col-sm-2 control-label">Phone No</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="mobileno" placeholder="Phone no" [(ngModel)]="mobileno" required>
       <span class="errorMsg" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <label for="emailid" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" name="emailid" placeholder="Email" [(ngModel)]="emailid" [(ngModel)]="emailid" required>
       <span class="errorMsg" style="color:red"></span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" >Register User</button>
    </div>
  </div>
</form>
</div>

<h3>Register User Form</h3>

</div>

<label for="mobileno" class="col-sm-2 control-label">Phone No</label>

</div>

<label for="emailid" class="col-sm-2 control-label">Email</label>

</div>

<button type="submit" class="btn btn-default" >Register User</button>

</div>

</form>

</div>

Create a component with component selector name is “form-component” and add templateUrl path.

form.component.ts:

import { Component, Input,Directive } from '@angular/core';
@Component({
	selector:"form-component",
	templateUrl: './forms.component.html'
});
export class formsComponent {}

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

@Component({

selector:"form-component",

templateUrl: './forms.component.html'

});

export class formsComponent {}

Now in order to add styles to your component, define stylesUrl path to your component meta data like below.

Updated form.component.ts:

@Component({
	selector:"form-component",
	templateUrl: './forms.component.html',
  	styleUrls: [
	    '../../../node_modules/bootstrap/dist/css/bootstrap.css'
  	]
})

@Component({

selector:"form-component",

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

styleUrls: [

'../../../node_modules/bootstrap/dist/css/bootstrap.css'

]

})

Note: You should install bootstrap css library using npm install (by adding “bootstrap”:”~3.3.7″ to the devDependencies property in package.json file). Then add above mentioned path.

Create a directive with selector name “validateValue”, we can use this directive, by simply injecting directive selector name to the form template.

import { Directive} from '@angular/core';
@Directive({
        selector:'[validateValue]'
})
export class ValidationDirective {}

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

@Directive({

selector:'[validateValue]'

})

export class ValidationDirective {}

Now update our form template by adding directive selector name as attribute to the our form fields like below.

Updated forms.component.html :

<input type="text" class="form-control" name="uname" placeholder="User Name" [(ngModel)]="uname" [validateValue]="uname" fieldName="name" required>
 <input type="text" class="form-control" name="mobileno" placeholder="Phone no" [(ngModel)]="mobileno" [validateValue]="mobileno" fieldName="phoneno" required>
 <input type="email" class="form-control" name="emailid" placeholder="Email" [(ngModel)]="emailid" [validateValue]="emailid" fieldName="emailid" required>

In the above code,we are passing field values (like [validateValue]="uname" ) and field name (like fieldName="name" ) to the directive. Now update our directive file by adding input properties.

validation.directive.ts:

import { Directive, Input } from '@angular/core';
export class ValidationDirective {
        @Input() validateValue: string;
	@Input() fieldName;
}

import { Directive, Input } from '@angular/core';

export class ValidationDirective {

@Input() validateValue: string;

@Input() fieldName;

}

Add a constructor function to get the template DOM control to the directive and also add HostListener to listen the input field events.

Updated validation.directive.ts:

import { Directive, ElementRef, Input, HostListener} from '@angular/core';

export class ValidationDirective {

	@Input() validateValue: string;
	@Input() fieldName;
	private currentElement;

	constructor(elm: ElementRef){
		this.currentElement = elm.nativeElement;  /*capturing current element and assiging to private variable*/
	}

	@HostListener('blur') onBlur() {

		/*prventing button type */
		if(this.currentElement.tagName == 'BUTTON') {
			return;
		}
	}
}

import { Directive, ElementRef, Input, HostListener} from '@angular/core';

export class ValidationDirective {

@Input() validateValue: string;

@Input() fieldName;

private currentElement;

constructor(elm: ElementRef){

this.currentElement = elm.nativeElement; /*capturing current element and assiging to private variable*/

}

@HostListener('blur') onBlur() {

/*prventing button type */

if(this.currentElement.tagName == 'BUTTON') {

return;

}

Now you are getting model data and elements to the directive, so you can write your validations. Refer below input field validation code.

Updated validation.directive.ts:

import { Directive, ElementRef, Input, HostListener} from '@angular/core';
@Directive({
	selector:'[validateValue]'
})
export class ValidationDirective {
	@Input() validateValue: string;
	@Input() fieldName;
	private currentElement;
	constructor(elm: ElementRef){
		this.currentElement = elm.nativeElement;
	}
	@HostListener('blur') onBlur() {
		if(this.currentElement.tagName == 'BUTTON') {
			return;
		}
		let errorTag = this.currentElement.nextElementSibling;
		let val = this.validateValue;
		if(this.nullCheck()) { return }
		if(this.fieldName == "name"){
			(val.length < 4 || val.length > 20) ? 
			 (errorTag.innerHTML = `Name, min and max length are  4 and 20`,
			  this.currentElement.style.borderLeft ="4px solid red"):  
			 (errorTag.innerHTML ="",
			  this.currentElement.style.borderLeft ="4px solid green");
		} 
		else if(this.fieldName == "phoneno"){
			(/^\d{10}$/.test(val)) ? 
			(errorTag.innerHTML ="",
			 this.currentElement.style.borderLeft ="4px solid green" ): 
			(errorTag.innerHTML = `Phone number must be ten digits number`,
			 this.currentElement.style.borderLeft ="4px solid red");
		}
		else {
			var emailRegx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			(emailRegx.test(val)) ?
			(errorTag.innerHTML ="",
			this.currentElement.style.borderLeft ="4px solid green") : 
			(errorTag.innerHTML = `Enter valid Email Address ex:abcd@gmail.com`,
			this.currentElement.style.borderLeft ="4px solid red")
		}
	}

	nullCheck(){
		let errorTag = this.currentElement.nextElementSibling;
		if(this.validateValue == undefined || this.validateValue == "" || this.validateValue == null ) {
			this.currentElement.style.borderLeft ="4px solid red";
			errorTag.innerHTML = ` Required Field `;
			return true;
		}else {
			this.currentElement.style.border ="";
			errorTag.innerHTML = "";
		}
	} 
}

import { Directive, ElementRef, Input, HostListener} from '@angular/core';

@Directive({

selector:'[validateValue]'

})

export class ValidationDirective {

@Input() validateValue: string;

@Input() fieldName;

private currentElement;

constructor(elm: ElementRef){

this.currentElement = elm.nativeElement;

}

@HostListener('blur') onBlur() {

if(this.currentElement.tagName == 'BUTTON') {

return;

}

let errorTag = this.currentElement.nextElementSibling;

let val = this.validateValue;

if(this.nullCheck()) { return }

if(this.fieldName == "name"){

(val.length < 4 || val.length > 20) ?

(errorTag.innerHTML = `Name, min and max length are 4 and 20`,

this.currentElement.style.borderLeft ="4px solid red"):

(errorTag.innerHTML ="",

this.currentElement.style.borderLeft ="4px solid green");

}

else if(this.fieldName == "phoneno"){

(/^\d{10}$/.test(val)) ?

(errorTag.innerHTML ="",

this.currentElement.style.borderLeft ="4px solid green" ):

(errorTag.innerHTML = `Phone number must be ten digits number`,

this.currentElement.style.borderLeft ="4px solid red");

}

else {

var emailRegx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

(emailRegx.test(val)) ?

(errorTag.innerHTML ="",

this.currentElement.style.borderLeft ="4px solid green") :

(errorTag.innerHTML = `Enter valid Email Address ex:abcd@gmail.com`,

this.currentElement.style.borderLeft ="4px solid red")

}

nullCheck(){

let errorTag = this.currentElement.nextElementSibling;

if(this.validateValue == undefined || this.validateValue == "" || this.validateValue == null ) {

this.currentElement.style.borderLeft ="4px solid red";

errorTag.innerHTML = ` Required Field `;

return true;

}else {

this.currentElement.style.border ="";

errorTag.innerHTML = "";

}

source code : link

POPULAR CATEGORY

Angular2

ABOUT US

TechGlobo

Angular 2 Customized Grid Example

Angular 2 – Basic Login Example

Angular2 CRUD App – with JSON, PHP

Angular 2 Custom Directive – Form Validation

EDITOR PICKS

POPULAR POSTS

Angular 2 – Basic Login Example

Angular 2 Custom Directive – Form Validation

Angular 2 Customized Grid Example

POPULAR CATEGORY