Reactive form programming in Angular 7

Reactive form programming in Angular 7

In Angular, there are two ways to work with web forms: template driven forms and reactive forms. In template driven form, we use angular directives to build the internal representation of form in the html template file.

;Most of the code is written in html template file, making it sometimes difficult to understand and test.

Benefits

There are few benefits of using reactive form over the template forms. These are:

  • Add form controls more dynamically
  • Add form validation dynamically
  • Using custom validations

    Reactive Form Programming

To start with reactive form programming, you should know about these classes:

  • Add form controls more dynamically
  • Add form validation dynamically
  • Using custom validations

    Setting the project

    ng new reactiveform> *ng new reactiveform> *ng new reactiveform### Add the ReactiveFormsModule in the Module file

In order to use Reactive Forms in your app, we have to first import ReactiveFormsModuleinapp.module.tsfrom@angular/forms, and then add in the @NgModule imports array.

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

A Basic Control: FormControl

Let’s first create ourgeneralInfocomponent in the app.

ng new reactiveform To create any form control, we first have to import FormControl from @angular/forms package into our component.

import { FormControl } from '@angular/forms';

After importing FormControl, we will create an instance of our form control firstName.

firstName = new FormControl('');

We can use the FormControl constructor to set the initial value of the control. Here, we are setting the empty string in the constructor.

Placing form control in template

After creating our first form control firstName in the controller file, it’s time to place this control in our html template file. Let’s put our form control in template.

general-info.component.html

<label>
FirstName : <input type="text" [formControl] = "firstName">
</label>

Using the template binding syntax, we bind our form control to the firstName input box in the template.

Displaying our component

In order to display our component in the browser window, we are going to place it in the app.component.html file.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
 Welcome to {{ title }}!
 </h1>

 <app-general-info></app-general-info>


<router-outlet></router-outlet>

Notice line 7, we have placed our component <app-general-info></app-general-info> in this template. Now, let’s see how our form looks like in browser window.

Accessing Form Control Values

In reactive forms, you can access any form control state and value at any point of time. You can then manipulate the form control values from the component class or component template. Let’s see how to display our form control value in component template file.

Accessing form control value in template file

You can access and display the form control value using the value property.

general-info.component.html

<p>First Name: {{firstName.value}}</p>

The value on the form will change as you type in the form input control firstName.

As you can see in above screenshot, as we type zeptobook in our form control firstName, it is immediately displayed below.

Accessing and setting the form control value in component class

Like you access form control value in component template file, you can access it in component class programmatically. You can manipulate value here in component class file.

ng new reactiveform Let’s see how to set the control value programmatically. In the general-info.component.ts file, we have a method updateFirstName(), and set the form control value ZeptoBook using this.firstName.setValue('ZeptoBook').

general-info.component.ts

updateFirstName(){
this.firstName.setValue('ZeptoBook');
&nbsp; }

general-info.component.html

Now, we have to write code to call this method from button click event. Let’s create a button and attach updateFirstName() method to button’s click event.

<p>
<button (click)="updateFirstName()">Update First Name</button>
</p>

Now, when user click on this button, it will set the form control value to ZeptoBook and update this in input box and label.

Setting initial value in form control

We can also set some initial value while creating the form control. Remember, we put empty string while creating our firstName form control. Now, let’s see how to use form control constructor to initialize the value in the form control.

general-info.component.ts

age = new FormControl(18);

Here, we have created an age form control and initialized its value to 18 in its constructor. Accessing the age form control in the component template file.

general-info.component.html

<label>
Age : <input type="text" [formControl] = "age">
</label>
<p>Age: {{age.value}}</p>

Now, open the browser and see the output.

Here you can see, Age input box and label is showing the initialized value of 18, which you can change anytime.

Now, let’s have a look at complete code.

general-info.component.ts

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


@Component({
selector: 'app-general-info',
 templateUrl: './general-info.component.html',
 styleUrls: ['./general-info.component.css']
})
export class GeneralInfoComponent implements OnInit {


constructor() { }


 ngOnInit() {}


firstName = new FormControl('');
age = new FormControl(18);


updateFirstName(){
 this.firstName.setValue('ZeptoBook');
 }
}

general-info.component.html

<p>
 Our General Info Component
</p>
<label>
 FirstName : <input type="text" [formControl] = "firstName">
</label>
<p>First Name: {{firstName.value}}</p>
<p>
 <button (click)="updateFirstName()">Update First Name</button>
</p>
<label>
 Age : <input type="text" [formControl] = "age">
</label>
<p>Age: {{age.value}}</p>

Grouping Form Controls: FormGroup

Above we read about basic form control, now let’s move forward to group of form controls called FormGroup. FormGroup is used to track the value and validation state of form control.

ng new reactiveform Let’s create a new component app-form-group to demonstrate FormGroup.

ng generate component formGroup

Import FormGroup and FormControl

After generating our new component, it’s time to import these classes in component class.

form-group.component.ts

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

Create FormGroup instance

Let’s create a property in our component class called sampleForm and set the property to a new Form Group instance. In the Form Group instance constructor, we have created these form control instances.

form control instances in form group

  • Add form controls more dynamically
  • Add form validation dynamically
  • Using custom validations

    form-group.component.ts

sampleForm = new FormGroup({
   firstName: new FormControl(''),
   lastName: new FormControl(''),
   address: new FormControl(''),
   city: new FormControl('')
  });

Attaching FormGroup model with component view

Once we created sampleForm control in component class, it’s time to bind FormGroup model to our component view template.

Let’s see the syntax how to bind the model to view.

form-group.component.html

<form [formGroup] = "sampleForm" (ngSubmit)="onSubmit()">
 <label>First Name: <input type="text" formControlName="firstName"></label><br/>
 <label>Last Name: <input type="text" formControlName="lastName"></label><br/>
<label>Address: <input type="text" formControlName="address"></label><br/>
 <label>City: <input type="text" formControlName="city"></label><br/>
 <br/>
<button type="submit">Submit</button>
</form>

We have add a submit button, and add ngSubmit event. On pressing submit event, we are firing onSubmit() function of the component class. Let’s see the complete code.

form-group.component.ts

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


@Component({
 selector: 'app-form-group',
 templateUrl: './form-group.component.html',
styleUrls: ['./form-group.component.css']
})
export class FormGroupComponent implements OnInit {


 constructor() { }


 ngOnInit() {}


sampleForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormControl(''),
  city: new FormControl('')
 });


 onSubmit(){
   console.log(this.sampleForm.value);
  }
}

form-group.component.html

<p>
&nbsp; form-group works!
</p>
<form [formGroup] = "sampleForm" (ngSubmit)="onSubmit()">
  <label>First Name: <input type="text" formControlName="firstName"></label><br/>
  <label>Last Name: <input type="text" formControlName="lastName"></label><br/>
 <label>Address: <input type="text" formControlName="address"></label><br/>
 <label>City: <input type="text" formControlName="city"></label><br/>
 <br/>
  <button type="submit">Submit</button>
</form>

Also, in order to display this component in browser, I have commented our previous component app-general-info, and placed our app-form-group component. See the commented line 7.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
 Welcome to {{ title }}!
 </h1>

 <!-- <app-general-info></app-general-info> -->
 <app-form-group></app-form-group>


<router-outlet></router-outlet>

Now, once you open your browser, and see the screen, it looks like this.

On submit, output will be rendered in browser console.window.

Now, see the red marked area in console log.

Easy way to generate Form Control: FormBuilder

When we have multiple forms, then it become very tedious and repetitive to create form controls. FormBuilder service is a easy way for generating form controls.

Let’s create a new component app-form-group to demonstrate FormGroup.

ng new reactiveform#### Import FormBuilder

After generating our new component, it’s time to import these FormBuilder in component class.

form-builder.component.ts

import { FormBuilder } from '@angular/forms';

Inject FormBuilder in Constructor

form-builder.component.ts

constructor(private fb: FormBuilder) { }

Creating the form controls

Here we are going to create a simple login form, having username and password form controls in component class.

builderForm = this.fb.group({
   userName: [''],
   password: ['']
 });

Now, notice the syntax, the declaration of FormGroup and FormControl are now implicit. This saves a lot of our code. We only need to have fields name with the default values.

Attaching FormBuilder model with component view

form-builder.component.html

<p>
 form-builder works!
</p>
<form [formGroup]="builderForm" (ngSubmit) = "login()">
<label>User Name: <input type="text" name="username" id="username" formControlName="userName"></label><br/>
<label>Password: <input type="password" name="password" id="password" formControlName="password"></label><br/>
<button type="submit">Submit</button>
</form>

If you see, we have a submit button, and attached login() function to this submit button. See the login() function in the component class file.

login(){
   console.log(this.builderForm.value);
  }

Add this component in app.component.html file

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
   Welcome to {{ title }}!
  </h1>

 <!-- <app-general-info></app-general-info> -->
 <!-- <app-form-group></app-form-group> -->
<app-form-builder></app-form-builder>


<router-outlet></router-outlet>

Open the browser, and see the result.

See the red marked console log. You can see the username and password fields values. The complete code is:

form-builder.component.ts

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


@Component({
 selector: 'app-form-builder',
 templateUrl: './form-builder.component.html',
 styleUrls: ['./form-builder.component.css']
})
export class FormBuilderComponent implements OnInit {


 constructor(private fb: FormBuilder) { }


 ngOnInit() {}


 builderForm = this.fb.group({
   userName: [''],
   password: ['']
 });


  login(){
   console.log(this.builderForm.value);
   }


}

form-builder.component.html

<p>
 form-builder works!
</p>
<form [formGroup]="builderForm" (ngSubmit) = "login()">
<label>User Name: <input type="text" name="username" id="username" formControlName="userName"></label><br/>
<label>Password: <input type="password" name="password" id="password" formControlName="password"></label><br/>
<button type="submit">Submit</button>
</form>

In this way, we created our simple form using the FormBuilder.

Summary

In this post, we learned about reactive form programming using the FormControl, FormGroup and FormBuilder. These are more powerful way of creating forms as compared to template driven approach. You can do lot of things in the component class file, making the component template file light and thin, containing only html syntax. This approach is also useful for testing purpose.

I hope you enjoyed more reading this blog.

Further reading:

The Pros and Cons of Angular Development

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Angular 8 - Reactive Forms Validation Example

Angular vs React vs Vue: Which is the Best Choice for 2019?

A comparison between Angular and React

Getting Started with Nx in Angular

Learn Angular 8 from Scratch for Beginners

How to create a registration form using Angular 8 and Kendo UI

Top 15 Programming Languages by Popularity (2004-2019)

angular angular-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Angular Charts: How To Add Charts In Angular 9 Example

To use charts in Angular, we will use the chart.js library to construct the charts. We will fake the backend server for data and display it on charts.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

What are the best alternatives for angular js?

<img src="https://moriohcdn.b-cdn.net/193902114c.png">There are numerous frameworks and libraries used across the globe. If not angular, there are platforms like React, Vue, Aurelia and so on for app development.

Angular 8 Node & Express JS File Upload

In this Angular 8 and Node.js tutorial, we are going to look at how to upload files on the Node server. To create Angular image upload component, we will be using Angular 8 front-end framework along with ng2-file-upload NPM package; It’s an easy to use Angular directives for uploading the files.