angular 4 form builder example

FormBuilder in Angular 4

Angular form builder having API’s through which we can manage our form controls in form groups.  FormBuilder returns form group object using roup method. we are only passing the initial value and Validators for form control instead of creating a FormControl object manually every time. We do not need to make any changes in the template, it just works, this is a simplified API.

Example

Step 1:

Create a new component (formbuilderex.component.ts) and add following code.

ng g c formbuilder 

import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
@Component({
  selector: 'app-formbuilderex',
  templateUrl: './formbuilderex.component.html',
  styleUrls: ['./formbuilderex.component.css']
})
export class FormbuilderexComponent implements OnInit {
  EMAIL_REGEX = "^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$";
  registrationForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.registrationForm = this.formBuilder.group({
      fname: ['yogesh', Validators.required],
      lname: '',
      email: ['', [Validators.required,
        Validators.pattern(this.EMAIL_REGEX)]],
        address: this.formBuilder.group({
        city: '',
        state: ['', Validators.required]
         })
        });
        }
        onSubmit(formvalue)
        {
          console.log(formvalue);
          console.log(this.registrationForm.value);
        }
      
  }

Step 2: Add Following code FormBuilder.component.html

<p>
  formbuilderex works!
</p>
<form novalidate [formGroup]="registrationForm"  (ngSubmit)="onSubmit(registrationForm.value)">  
  <input  type="text" class="form-control" formControlName="fname" >
  <div class="error-message"  *ngIf="registrationForm.get('fname').touched && registrationForm.get('fname').hasError('required')"> 
      The First name is required.  
     </div>  
  
  <input  type="text" class="form-control" formControlName="lname" >
  <div class="error-message"  *ngIf="registrationForm.get('lname').touched && registrationForm.get('lname').hasError('required')"> 
      The Last name is required.  
     </div> 
    <input type="email" class="form-control" formControlName="email">
      <div class="error-message"  *ngIf="registrationForm.get('email').touched && registrationForm.get('email').hasError('required')"> 
           The email is required.  
          </div>  
          <div class="error-message" *ngIf="registrationForm.get('email').touched && registrationForm.get('email').hasError('pattern')">  
              The email format should be <i>yogeshdotnet@gmail.com</i>  </div>
              <div formGroupName="address">
              <input type="text" class="form-control" formControlName="city">
              <br/>
              <select class="form-control" formControlName="state"><option value="RJ">Rajasthan</option><option value="UP">Uttar Pradesh</option></select>
              <div class="error-message" *ngIf="registrationForm.get('address').get('state').touched && registrationForm.get('address').get('state').hasError('required')">
                The State is required. </div> 
                </div>
                <button type="submit" class="btn btn-secondary" [disabled]="registrationForm.invalid">Submit</button>
              
   </form>

Step 3: Pass reference of formbuilder component in app.component.html.

angular 2 form builder