In this blog, we'll see how to use reactive forms in angular4.

We can work with two different types of forms: Template-driven and Reactive forms. In this post, we'll see how to use reactive forms with example.

Angular4 Reactive forms:

Let's create a template form with user required fields

<form>
<div>
  <label>First Name</label>
  <input type="text" name="first_name"/>
</div>
<div>
  <label>Last Name</label>
  <input type="text" name="last_name"/>
</div>
<div>
  <label>Email</label>
  <input type="text" name="email"/>
</div>
<button type="submit">Submit</button>
<button type="button">Cancel</button>
</form>

In the above template, the requirements are

First Name: A unique first name should be provided.

Last Name: A unique last name should be provided.

Email: A valid email id that is unique and is required.

While using reactive forms import ReactiveFormsModule in your app.module.js and BrowserModule is used for bootstrap.

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

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

export class AppModule {}

import FormGroup, FormControl, Validators in your app component(Reactive Form related classes)

• FormGroup – The value will be an object; Each object element should be a FormControl.
• FormControl – The value is a string or object; It is the default value of form control

import { FormGroup, FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core'

@Component({

selector: 'my-app',
templateUrl: 'src/app.component.html'
})

export class AppComponent implements OnInit {

private sampleForm: FormGroup;

constructor() {}

ngOnInit() {

  // Create new Form control with all your required fields.

  this.sampleForm = new FormGroup({
    'first_name': new FormControl(),
    'last_name': new FormControl(),
    'email': new FormControl(),
  });
}

cancel() {
  console.log(this.sampleForm);
}

onSubmit() {
  console.log('Form successful submit.');
  console.log(this.sampleForm.value);
}

}

In the above example, we have created FormGroup for the fields mentioned, Now we need to assign form object(formGroup, formControlName) to HTML as follows.

<form [formGroup]="sampleForm" (ngSubmit)="onSubmit()">
<div>
  <label>First Name</label>
  <input type="text" name="first_name" formControlName="first_name"/>
</div>
<div>
  <label>Last Name</label>
  <input type="text" name="last_name" formControlName="last_name"/>
</div>
<div>
  <label>Email</label>
  <input type="text" name="email" formControlName="email"/>
</div>
<button type="submit">Submit</button>
<button type="button" (click)="cancel()">Cancel</button>
</form>

When user clicks submit button then onSubmit() function triggers and provides you the form data in console(Here you can perform your logic), the same for the cancel.