Angular Reactive Forms Example
By AmarSivas | | Updated : 2021-03-22 | Viewed : 30 times

Table of Contents:
Angular Reactive Forms
Generally, the forms are used to capture the data in the form provided by the user for validation. After completion of validation, these forms create both models (form model and data model) creation. So it provides a way to track the model changes by the forms.
Reactive forms are used for maintaining the state of forms. Each change implies the new state in form. These forms are built around the observable where form inputs will be worked as observables inputs. So these inputs values can be accessed synchronously.
Reactive forms are generally different from template-driven forms. Unlike template-driven forms, Reactive forms data will be accessed synchronously. Compare to Template-driven forms, Reactive forms are the most robust, scalable, and testable. Unlike template-driven forms, the reactive forms create data models as structured and immutable.
Angular Reactive Forms Example
Now it is time to try examples for Reactive forms. We will see one by one file to execute the Reactive Form example.
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular-Reactive-Forms-Example-App';
}
<app-billing-details></app-billing-details>
import { NgModule } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { BillingDetailsComponent } from "./billing-details/billing-details.component";
@NgModule({
declarations: [
AppComponent,
BillingDetailsComponent
],
imports: [
BrowserModule,
// other imports ...
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Nothing to observe much in
Now we will create a component library named with billing-details. So we are trying to implement the reactive forms. So to create the component library named with billing-details, we need to use the below-given commands.
ng g component billing-details
We will change content for
<div class="container">
<div class="row">
<form [formGroup]="userForm">
<h4 class="mb-3">Billing address</h4>
<div class="row">
<div class="col-md-6 mb-3 float-left">
<label for="firstName">First name</label>
<input class="form-control" formControlName="firstName" type="text">
</div>
<div class="col-md-6 mb-3float-left">
<label for="lastName">Last name</label>
<input class="form-control" formControlName="lastName" type="text">
</div>
</div>
<div class="mb-3">
<label for="userName">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input class="form-control" formControlName="userName" type="text">
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class="text-muted">(Optional)</span></label>
<input class="form-control" formControlName="email" type="email">
</div>
<div class="mb-3">
<label for="address1">Address 1</label>
<input class="form-control" formControlName="address1" type="text">
</div>
<div class="mb-3">
<label for="address2">Address 2</label>
<input class="form-control" formControlName="address2" type="text">
</div>
</form>
<div class="d-flex w-100 pt-4 ">
<button (click)="logFormValue()" class="btn btn-primary">Log Billing address</button>
</div>
<div class="d-flex w-50 pt-4 ">
<p>
Form Value: {{ userForm.value | json }}
</p></div>
</div>
</div>
To get the entire project you can refer Angular-Reactive-Forms-Example-App for the remaining code.
Notice here two main things one is
import {Component} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {User} from '../user.model/user';
@Component({
selector: 'app-billing-details',
templateUrl: './billing-details.component.html',
styleUrls: ['./billing-details.component.css']
})
export class BillingDetailsComponent {
userForm: FormGroup;
user: User = {
firstName: 'firstName',
lastName: 'lastName',
userName: 'userName',
email: 'you@example.com',
address1: 'Addres line1',
address2: 'Addres line2'
};
constructor(private formBuilder: FormBuilder) {
this.userForm = this.formBuilder.group({
'firstName': [this.user.firstName],
'lastName': [this.user.lastName],
'userName': [this.user.userName],
'email': [this.user.email],
'address1': [this.user.address1],
'address2': [this.user.address2]
});
}
logFormValue() {
console.log(this.userForm.value);
}
}
Notice here in constructor userForm (FormGroup) is created using with formBuilder. On submission of a button, it will log entire form values.