Model driven form in Angular2 with FormBuilder

Add this code in ts file Now updated to Angular4

 
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder,Validators } from '@angular/forms';
@Component({
  selector: 'app-modeldrivenformbuilder',
  templateUrl: './modeldrivenformbuilder.component.html',
  styleUrls: ['./modeldrivenformbuilder.component.css']
})
export class ModeldrivenformbuilderComponent implements OnInit {
formValue: FormGroup;
  constructor(private _formBuilder:FormBuilder) { }

  ngOnInit() {
    this.formValue = this._formBuilder.group({
        name:['',[Validators.required,Validators.minLength(2)]],
        email:['',[Validators.required,Validators.pattern("[^ @]*@[^ @]*")]],
        phone:['',[Validators.required,Validators.pattern("^[789]\d{9}$")]],
         select1:[Validators.required],
         textarea1:['',[Validators.required,Validators.minLength(2)]],
          city:['',Validators.required],
           street:['',Validators.required],
             pincode:['',[Validators.required,Validators.pattern("^[1-9][0-9]{5}$")]],
    })
  }
onSubmit(){
	console.log(this.formValue)
}
}

This is the markup of form

 
<div class="widget box">
                <div class="widget-header"> <h4> Model Driven Form Builder</h4> </div>
                 <div class="widget-content">
<form [formGroup]="formValue" (ngSubmit)="onSubmit()" novalidate>
                   

                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
                            <div class="form-group row mb-1">
                                <label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Name</label>
                                <div class="col-8">
                                    <input class="form-control form-control-sm rounded-0"  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">
Name is too short
</div>

</div>
</div>
<div class="form-group row mb-1">
<label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Email</label>
<div class="col-8">
<input class="form-control form-control-sm rounded-0" 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>
<div class="form-group row mb-1">
<label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Phone</label>
<div class="col-8">
<input type="text" formControlName="phone" class="form-control form-control-sm rounded-0" >
<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('pattern') &&
(formValue.controls['phone'].dirty || formValue.controls['phone'].touched)" class="alert alert-danger">
Enter Valid format (Example)<br>
9882223456<br>
8976785768<br>
7986576783<br>
</div>
</div>
</div>

<div class="form-group row mb-1">
<label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Select</label>
<div class="col-8">
<select formControlName="select1" class="form-control form-control-sm">
<option selected></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div *ngIf="formValue.controls['select1'].hasError('required') &&
(formValue.controls['select1'].dirty || formValue.controls['select1'].touched)" class="alert alert-danger">
Select option from dropdown;
</div>
</div>
</div>

</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
<div class="form-group row mb-1">
<label for="exampleTextarea" class="col-4 col-form-label col-form-label-sm text-right">Example textarea</label>
<div class="col-8">
<textarea class="form-control rounded-0" formControlName="textarea1" rows="3"></textarea>
<div *ngIf="formValue.controls['textarea1'].hasError('required') &&
(formValue.controls['textarea1'].dirty || formValue.controls['textarea1'].touched)" class="alert alert-danger">
Enter something in textarea
</div>
<div *ngIf="formValue.controls['textarea1'].hasError('minlength') &&
(formValue.controls['textarea1'].dirty || formValue.controls['textarea1'].touched)" class="alert alert-danger">
Name is too short
</div>

</div>
</div>

<div class="form-group row mb-1">
<label class="col-4 col-form-label col-form-label-sm text-right">City</label>
<div class="col-8">

<input formControlName="city" class="form-control form-control-sm rounded-0">
<div *ngIf="formValue.controls['city'].hasError('required') &&
(formValue.controls['city'].dirty || formValue.controls['city'].touched)" class="alert alert-danger">
City is required
</div>

</div>
</div>

<div class="form-group row mb-1">
<label class="col-4 col-form-label col-form-label-sm text-right">Street</label>
<div class="col-8">
<input formControlName="street" name="street" type="text" class="form-control form-control-sm rounded-0">
<div *ngIf="formValue.controls['street'].hasError('required') &&
(formValue.controls['street'].dirty || formValue.controls['street'].touched)" class="alert alert-danger">
street is required
</div>
</div>
</div>

<div class="form-group row mb-1">
<label class="col-4 col-form-label col-form-label-sm text-right">Pin Code</label>
<div class="col-8">
<input type="text" formControlName="pincode" class="form-control form-control-sm rounded-0" >
<div *ngIf="formValue.controls['pincode'].hasError('required') &&
(formValue.controls['pincode'].dirty || formValue.controls['pincode'].touched)" class="alert alert-danger">
Pincode is required
</div>
<div *ngIf="formValue.controls['pincode'].hasError('pattern') &&
(formValue.controls['pincode'].dirty || formValue.controls['pincode'].touched)" class="alert alert-danger">
Enter valid pincode
</div>
</div></div>

</div>

</div>
<div class="d-flex justify-content-center">
<button type="submit" [disabled]="formValue.invalid" class="btn btn-info btn-sm" role="button">Submit</button>

</div>
</form>
</div>
</div>

Working demo of TemplateDrivenForm Demo Link

Leave a Reply

Your email address will not be published. Required fields are marked *