Forms and Pipes in Angular2 (Part 3 of 5)

Let's learn Angular 2 by an Examples and not spending much time in theory's. We will cover the best practical and ready to use Angular 2 Examples.

You can find some other posts of this series below:

Component in Angular2 (Part 1 of 5)
Directive and Pipes in Angular2 (Part 2 of 5)
Forms and Pipes in Angular2 (Part 3 of 5)
Dependency Injection in Angular2 (Part 4 of 5)
HTTP and Routing in Angular2 (Part 5 of 5)

All example are based on Angular2 RC 1

Forms - Template Driven Forms

• t2.component.ts
• t2.component.html

	import { Component } from '@angular/core';
	import { NgForm,ControlGroup, Control, Validators } from '@angular/common';
	@Component({
	moduleId: module.id,
	selector: 't2-app',
	templateUrl: 't2.component.html',
	styleUrls: ['t2.component.css']
	})
	export class T2AppComponent {
	title:any;
	onSubmit(data){
	this.title = data;
	}
	}

view raw t2.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>
	<form (ngSubmit)="onSubmit(myform.value)" #myform="ngForm">
	<ul>
	<li>
	<label for="medium">Medium2</label>
	<select name="medium" id="medium" ngControl="medium">
	<option value="Movies">Movies</option>
	<option value="Series">Series</option>
	</select>
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" name="name" id="name" ngControl="name"/>
	</li>
	</ul>
	<button type="submit">Save</button>
	</form>

view raw t2.component.html hosted with ❤ by GitHub

Forms - Model Driven Forms

• t2.component.ts
• t2.component.html

	import { Component } from '@angular/core';
	import { ControlGroup, Control } from '@angular/common';
	@Component({
	moduleId: module.id,
	selector: 't3-app',
	templateUrl: 't3.component.html',
	styleUrls: ['t3.component.css']
	})
	export class T3AppComponent {
	form;
	ngOnInit(){
	this.form = new ControlGroup({
	'medium': new Control('Movies'),
	'name': new Control('')
	});
	}
	title:any;
	onSubmit(data){
	this.title = data;
	}
	}

view raw t2.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>
	<form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
	<ul>
	<li>
	<label for="medium">Medium2</label>
	<select name="medium" id="medium" ngControl="medium">
	<option value="Movies">Movies</option>
	<option value="Series">Series</option>
	</select>
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" name="name" id="name" ngControl="name"/>
	</li>
	</ul>
	<button type="submit">Save</button>
	</form>

view raw t2.component.html hosted with ❤ by GitHub

Forms - Validation—built in

• t2.component.ts
• t2.component.html

	import { Component } from '@angular/core';
	import { ControlGroup, Control, Validators } from '@angular/common';
	@Component({
	moduleId: module.id,
	selector: 't3-app',
	templateUrl: 't3.component.html',
	styleUrls: ['t3.component.css']
	})
	export class T3AppComponent {
	form;
	ngOnInit(){
	this.form = new ControlGroup({
	'medium': new Control('Movies'),
	'name': new Control('',Validators.compose([
	Validators.required,
	Validators.pattern('[\\w\\-\\s\\/]+')
	]))
	});
	}
	title:any;
	onSubmit(data){
	this.title = data;
	}
	}

view raw t2.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>
	<form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
	<ul>
	<li>
	<label for="medium">Medium2</label>
	<select name="medium" id="medium" ngControl="medium">
	<option value="Movies">Movies</option>
	<option value="Series">Series</option>
	</select>
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" name="name" id="name" ngControl="name"/>
	</li>
	</ul>
	<button type="submit" [disabled]="!form.valid ">Save</button>
	</form>

view raw t2.component.html hosted with ❤ by GitHub

Forms - Validation—custom

• t2.component.ts
• t2.component.html

	import { Component } from '@angular/core';
	import { ControlGroup, Control, Validators } from '@angular/common';
	@Component({
	moduleId: module.id,
	selector: 't3-app',
	templateUrl: 't3.component.html',
	styleUrls: ['t3.component.css']
	})
	export class T3AppComponent {
	form;
	ngOnInit(){
	this.form = new ControlGroup({
	'medium': new Control('Movies'),
	'name': new Control('',Validators.compose([
	Validators.required,
	Validators.pattern('[\\w\\-\\s\\/]+'),
	])),
	'year': new Control('',this.yearValidation)
	});
	}
	yearValidation(control){
	if(control.value.trim().length === 0) return null;
	var year = parseInt(control.value);
	var minYear = 2000;
	var maxYear = 2010;
	if(year >= minYear && year <= maxYear) return null;
	return {'year': true}
	}
	title:any;
	onSubmit(data){
	this.title = data;
	}
	}

view raw t2.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>
	<form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
	<ul>
	<li>
	<label for="medium">Medium2</label>
	<select name="medium" id="medium" ngControl="medium">
	<option value="Movies">Movies</option>
	<option value="Series">Series</option>
	</select>
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" name="name" id="name" ngControl="name"/>
	</li>
	<li>
	<label for="year">Year</label>
	<input type="year" name="year" id="year" ngControl="year"/>
	</li>
	</ul>
	<button type="submit" [disabled]="!form.valid ">Save</button>
	</form>

view raw t2.component.html hosted with ❤ by GitHub

Forms - Error handling

• t2.component.ts
• t2.component.html

	import { Component } from '@angular/core';
	import { ControlGroup, Control, Validators } from '@angular/common';
	@Component({
	moduleId: module.id,
	selector: 't3-app',
	templateUrl: 't3.component.html',
	styleUrls: ['t3.component.css']
	})
	export class T3AppComponent {
	form;
	ngOnInit(){
	this.form = new ControlGroup({
	'medium': new Control('Movies'),
	'name': new Control('',Validators.compose([
	Validators.required,
	Validators.pattern('[\\w\\-\\s\\/]+'),
	])),
	'year': new Control('',this.yearValidation)
	});
	}
	yearValidation(control){
	if(control.value.trim().length === 0) return null;
	var year = parseInt(control.value);
	var minYear = 2000;
	var maxYear = 2010;
	if(year >= minYear && year <= maxYear) return null;
	return {'year': {'min':minYear, 'max':maxYear}}
	}
	title:any;
	onSubmit(data){
	this.title = data;
	}
	}

view raw t2.component.ts hosted with ❤ by GitHub

	<h1>
	{{title | json}}
	</h1>
	<form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
	<ul>
	<li>
	<label for="medium">Medium2</label>
	<select name="medium" id="medium" ngControl="medium">
	<option value="Movies">Movies</option>
	<option value="Series">Series</option>
	</select>
	</li>
	<li>
	<label for="name">Name</label>
	<input type="text" name="name" id="name" ngControl="name"
	ngControl="name"
	#name="ngForm"
	/>
	<div *ngIf="name.errors?.pattern" class="error">name is invalid</div>
	</li>
	<li>
	<label for="year">Year</label>
	<input type="year" name="year" id="year" ngControl="year"
	ngControl="year"
	#year="ngForm"
	/>
	<div *ngIf="year.errors?.year" class="error">must be between {{year.errors?.year.min}} and {{year.errors?.year.max}}</div>
	</li>
	</ul>
	<button type="submit" [disabled]="!form.valid ">Save</button>
	</form>

view raw t2.component.html hosted with ❤ by GitHub