Angular Tutorials and Guides

Angular Reactive Forms Example

By | | Updated : 2021-03-22 | Viewed : 426 times

Angular Reactive Forms Example

Angular provides Reactive forms where form fields can be grouped, validated. One more advantage with Reactive forms is that forms can be created dynamically. When we want to validate the fields it is required more effort in Angular. But with Angular Reactive forms, it will be easy to validate the fields in forms. Here we are going to learn Angular Reactive Forms.

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.

AppComponent.ts
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.component.html
<app-billing-details></app-billing-details>
app.module.ts
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 AppComponent.ts and app.component.html. But in app.module.ts, we are using ReactiveFormsModule as it needs to develop the Reactive forms.

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 billing-details.component.html and billing-details.component.ts as shown below.

billing-details.component.html
<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 [formGroup]="formGroup" and the second one formControlName="formControlName". So these are worked based on FormGroup and FormControl classes. So When we write the reactive forms we need to add [formGroup]="formGroup" to form tag and formControlName="formControlName" to each form control field tag.

[formGroup]="formGroup" indicates the entire form control fields grouped as formGroup. And to represent the single form field it is required to add formControlName="formControlName".

billing-details.component.ts
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.

Leave A Reply