;Most of the code is written in html template file, making it sometimes difficult to understand and test.
There are few benefits of using reactive form over the template forms. These are:
To start with reactive form programming, you should know about these classes:
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 ReactiveFormsModule
inapp.module.ts
from@angular/forms
, and then add in the @NgModule
imports array.
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 { }
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.
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.
<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.
In order to display our component in the browser window, we are going to place it in the 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>
<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.
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.
You can access and display the form control value using the value
property.
<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.
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 thegeneral-info.component.ts
file, we have a methodupdateFirstName()
, and set the form control value ZeptoBook usingthis.firstName.setValue('ZeptoBook')
.
updateFirstName(){
this.firstName.setValue('ZeptoBook');
}
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.
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.
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.
<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.
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');
}
}
<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>
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 componentapp-form-group
to demonstrate FormGroup.
ng generate component formGroup
After generating our new component, it’s time to import these classes in component class.
import { FormGroup, FormControl } from '@angular/forms';
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
sampleForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
address: new FormControl(''),
city: new FormControl('')
});
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 [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.
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);
}
}
<p>
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.
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.
import { FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) { }
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.
<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:
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);
}
}
<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.
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