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