How to capture data in Angular ReactiveForm using Form Builder


Form submission is an essential part of any commercial application. So lets learn about capturing data in Reactive Form which is give emphasize to component side.

We can use advance form builder to create model, interact with form data, validation ect.

  • Import Form Builder
  • Add dependency injection in constructor
  • Create a group using Form Builder service
  • Create getters for easy access
  • Bind the fomGroup and FormControlName

app.module import

We have to add import ReactiveFormsModule to app.module.ts as follows

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
.....
 imports: [
    BrowserModule,
    ReactiveFormsModule,   
  ],

Form Builder in component.ts

Form Builder service allows to create formGroup with various property like validation. Also declared three getter functions to quickly access data. The code of our component class will look like

import {FormBuilder } from '@angular/forms';
... 
 constructor(private fb: FormBuilder) {}   
  get Item(): any {
    return this.todoForm.get("item");
  }
  get Desc(): any {
    return this.todoForm.get("description");
  }
todoForm = this.fb.group({
    item: ["formBuilder example", [Validators.required, Validators.minLength(4)]],
    description: ["", Validators.required],
  });

Binding the control

We can replace the name property of input with formControlName. So that the data in the FormGroup will be automatically updated. and the template will look like

{{todoForm | json}}
<form [formGroup]="todoForm"   novalidation (ngSubmit)="OnSubmit()"  >
      <div class="form-group">
      <label>Title</label>
 <input type="text" required  [class.is-invalid]="Item.invalid && Item.touched" class="form-control" formControlName="item">
      </div>
      <div class="form-group ">
      <label>Description</label>
      <textarea class="form-control" formControlName="description" ></textarea>
      </div>
       <button  type="submit" class="btn btn-primary">Submit</button>
      </form>

The interpolation statement will display the data.

When ever the user change the data the {{todoForm | json}} will output the value and it is live data.

Now you know how to capture data in a Reactive form using formBuilder

A set form projects available in the Source-Code Page

These angular post may help you

[display posts tag=angular-form]

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.