Model driven form in Angular2

First add this code in app.module.ts
import ReactiveFormsModule from form module and then add in NgModule

 
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ReactiveFormsModule} from '@angular/forms';
import { AppComponent }   from './app.component';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

Import FormGroup,FormControl,Validators from Form module

 

import { Component } from '@angular/core';
import {FormGroup,FormControl,Validators} from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app/form.html'
})
export class AppComponent { 
	
formValue = new FormGroup({
	name: new FormControl('',[Validators.required,Validators.minLength(5),Validators.maxLength(10)]),
	email: new FormControl('', [Validators.required, Validators.pattern('[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$')]),
	phone: new FormControl(null,[Validators.required,Validators.pattern('[0-9]{10}')]),
	message: new FormControl('',[Validators.required,Validators.minLength(10)])
	});
onSubmit(){
	console.log(this.formValue.value)
}
}

add this form in html page

 

<div class="container"> 
<h1>Model driven form with Form Builder</h1>

<form [formGroup]="formValue" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="name" formControlName="name">
<div *ngIf="formValue.controls['name'].hasError('required') &&
 (formValue.controls['name'].dirty || formValue.controls['name'].touched)" class="alert alert-danger">
Name is required
</div>
<div *ngIf="formValue.controls['name'].hasError('minlength') &&
 (formValue.controls['name'].dirty || formValue.controls['name'].touched)" class="alert alert-danger">
Minimum 5 character
</div>
<div *ngIf="formValue.controls['name'].hasError('maxlength') &&
 (formValue.controls['name'].dirty || formValue.controls['name'].touched)" class="alert alert-danger">
Excedding 10 character
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" formControlName="email">
<div *ngIf="formValue.controls['email'].hasError('required') &&
 (formValue.controls['email'].dirty || formValue.controls['email'].touched)" class="alert alert-danger">
Email is required
</div>
<div *ngIf="formValue.controls['email'].hasError('pattern') &&
 (formValue.controls['email'].dirty || formValue.controls['email'].touched)" class="alert alert-danger">
Enter Valid Email address</div>
</div>

<div class="form-group">
<label>Phone</label>
<input type="tel" class="form-control" name="phone" formControlName="phone">
<div *ngIf="formValue.controls['phone'].hasError('required') &&
 (formValue.controls['phone'].dirty || formValue.controls['phone'].touched)" class="alert alert-danger">
Phone is Required</div>

<div *ngIf="formValue.controls['phone'].hasError('minlength') &&
 (formValue.controls['phone'].dirty || formValue.controls['phone'].touched)" class="alert alert-danger">
Must be a valid 10 digit phone number
</div>
<div *ngIf="formValue.controls['phone'].hasError('maxlength') &&
 (formValue.controls['phone'].dirty || formValue.controls['phone'].touched)" class="alert alert-danger">
Must be a valid 10 digit phone number
</div>
</div>

<div class="form-group">
<label>Message</label>
<textarea  class="form-control" name="message" formControlName="message"></textarea>
<div *ngIf="formValue.controls['message'].hasError('required')&&
 (formValue.controls['message'].dirty || formValue.controls['message'].touched)" class="alert alert-danger">
Message is Required
</div>
<div *ngIf="formValue.controls['message'].hasError('minlength')&&
 (formValue.controls['message'].dirty || formValue.controls['message'].touched)" class="alert alert-danger">
Minimum 10 character is Required
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
 
</form>
</div>

You can download the angulras 2 files from this link Angular 2 files

Leave a Reply Cancel reply