Tutorial by Examples

The below examples use the new form API introduced in RC3. pw-change.template.html <form class="container" [formGroup]="pwChangeForm"> <label for="current">Current Password</label> <input id="current" formControlName="curr...

import { Component } from '@angular/core'; import { Router , ROUTER_DIRECTIVES} from '@angular/router'; import { NgForm } from '@angular/forms'; @Component({ selector: 'login', template: ` <h2>Login</h2> <form #f="ngForm" (ngSubmit)="login(f.value,f....

For live demo click.. App index ts import {bootstrap} from '@angular/platform-browser-dynamic'; import {MyForm} from './my-form.component.ts'; bootstrap(MyForm); Custom validator import {Control} from @'angular/common'; export class CustomValidators { static emailFormat(control: Cont...

This example uses Angular 2.0.0 Final Release registration-form.component.ts import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms'; @Component({ templateUrl: "./registration-form.html" }) export class ExampleComponent { ...

app.module.ts Add these into your app.module.ts file to use reactive forms import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.comp...

FormComponent.ts import {Component} from "@angular/core"; import {FormBuilder} from "@angular/forms"; @Component({ selector: 'app-form', templateUrl: './form.component.html', styleUrls: ['./form.component.scss'], providers : [FormBuilder] }) export class FormComp...