Angular Material Design Components With Reactive Form

Introduction

This is a continuation of my previous post, How to Develop Reactive Form with Angular Material.

Please refer to the following link before going on with the current article,

Angular Material Component with Reactive Form Part-1

So let's start by implementing Reactive form with Angular 5

What is Reactive Form In Angular?

As we know there are primarily two types of forms available in Angular,

Template-driven Forms
Reactive Forms

Reactive form in Angular is a technique to manage your form in a reactive manner, it means that you can manage your form and validation from our component itself.

These forms are the best option when we have a complex form requirement.

Compared to Template driven forms, reactive forms are more suitable because we can define validations and model from component, that gives us more control on form.

Primarily it is also called "Model Driven Forms" , because model acts as a mediator between component and template.

It's really easy to implement, like using model in controller with form control object and binding it to component formcontrol template.

Some related terms are below,

FormControl

In Reactive forms we initialize FormControl object to use form functionality into our component, which engaged with our html form.

And when we update our form control's value than it will directly be reflected to our FormControl object that we created previously.

FormGroup

By using FormGroup, it binds all form controls together with some option's.

like :- Validations, name of input control etc ...

Step 1

First step is to import necessary package to use Reactive form in our App

Add following lines to our app.component.ts file,

import { FormBuilder, FormGroup, Validators ,FormsModule,NgForm } from '@angular/forms';

So after that we can use all the functionality related to Reactive Forms

And do not forgot to include ReactiveForm module in module.ts file,

import { FormsModule,ReactiveFormsModule } from '@angular/forms';

So as below there is my final module.ts file snippet,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import {
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatDatepicker,
MatNativeDateModule,
MatRadioModule,
MatSelectModule,
MatOptionModule,
MatSlideToggleModule,ErrorStateMatcher,ShowOnDirtyErrorStateMatcher
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatRadioModule,
MatSelectModule,
MatOptionModule,
MatSlideToggleModule
],
exports: [
MatButtonModule,
MatMenuModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
MatNativeDateModule,
MatRadioModule,
MatSelectModule,
MatOptionModule,
MatSlideToggleModule
],
providers: [
{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
],
bootstrap: [AppComponent]
})
export class AppModule { }

So far we have configured our component and module file for working with reactive form .

Step 2

Now let's move to html portion of this demo.

For reactive forms we need some important elements as below,

FormGroup

<form [formGroup]="regiForm">
</form>

here [formGroup] binds our controls as Group structure where each and every control resides within form binds with FormGroup object , which we will discuss later on this post .

(ngSubmit)

<form (ngSubmit)="onFormSubmit(regiForm.value)">
</form>

ngSubmit is primary event for our form , when we submit our form this event will be triggered and based on that regiForm[formGroup.value] , we are passing all the values to the component where we have already declared there .

formControlName

Every control we are using in form should have this directive , and its value is always same as we defined in our component.

Generally formcontrolname binds form control to component.

Step 3

Now it's time for some Validations. As we know, every form is useless if there are no validations, so we are going to see some important portion of validations.

In angular reactive forms, there are some statuses defined as per conditions like,

valid: if form's value are normal and as expected
invalid: if there is lack of valid values
touched: if we touched any control and have not provided values
dirty: returns true only when control was modified
pristine: returns true when no control was modified

So based on your requirement, you can use either of them.

For example

<span *ngIf="!regiForm.get('FirstName').valid && regiForm.get('FirstName').touched">Please enter First Name
</span>

regiForm is an FormGroup object with which we are going to engage our form controls , and by using their defined value like

E.g

FirstName, LastName, we get to know if either of them are valid.

Step 4

So far we have created and used all basic functionality that Reactive forms should have.

Please see the below snippet for better understanding,

<mat-toolbar color="accent">
<span>Manav Pandya - C#Corner</span>
<span class="demo-toolbar"></span>
<button mat-button href="asp-dotnet-mvc-tutorials.blogspot.in">Go To My Blog</button>
</mat-toolbar>
<mat-card>
<mat-card-title>
Angular Material Component With Angular 5
</mat-card-title>
<mat-card-content>
<form [formGroup]="regiForm" (ngSubmit)="onFormSubmit(regiForm.value)">
<table>
<tr>
<td>
<mat-form-field class="demo-full-width">
<input formControlName="FirstName" matInput placeholder="First Name">
</mat-form-field>
<mat-error>
<span *ngIf="!regiForm.get('FirstName').valid && regiForm.get('FirstName').touched">Please enter First Name !!!</span>
</mat-error>
</td>
<td>
<mat-form-field class="demo-full-width">
<input formControlName="LastName" matInput placeholder="Last Name">
</mat-form-field>
<mat-error>
<span *ngIf="!regiForm.get('LastName').valid && regiForm.get('LastName').touched">Please enter Last Name !!!</span>
</mat-error>
</td>
</tr>
<tr>
<td colspan="2">
<mat-form-field class="demo-full-width">
<textarea formControlName="Address" matInput placeholder="Address" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="5"></textarea>
</mat-form-field>
<mat-error>
<span *ngIf="!regiForm.get('Address').valid && regiForm.get('Address').touched">Please enter proper address !!!</span>
</mat-error>
</td>
</tr>
<tr>
<td colspan="2">
<mat-form-field class="demo-full-width">
<input formControlName="DOB" matInput [matDatepicker]="picker" placeholder="Date of birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi="true" #picker></mat-datepicker>
</mat-form-field>
<mat-error>
<span *ngIf="!regiForm.get('DOB').valid && regiForm.get('DOB').touched">Please select any Date !!!</span>
</mat-error>
</td>
</tr>
<tr>
<td>
<span>Gender</span><br><br>
<mat-radio-group formControlName="Gender">
<mat-radio-button value="Male">Male</mat-radio-button>
<mat-radio-button value="Female">Female</mat-radio-button>
</mat-radio-group>
<mat-error>
<span *ngIf="!regiForm.get('Gender').valid && regiForm.get('Gender').touched">Please select any gender !!!</span>
</mat-error>
</td>
<td><br>
<mat-form-field>
<mat-select formControlName="Blog" placeholder="Select Blog">
<mat-option>-- Select Any --</mat-option>
<mat-option value="C#Corner">C#Corner</mat-option>
<mat-option value="C#Corner">C#Corner</mat-option>
<mat-option value="C#Corner">C#Corner</mat-option>
</mat-select>
<mat-error>
<span *ngIf="!regiForm.get('Blog').valid && regiForm.get('Blog').touched">Please select any item !!!</span>
</mat-error>
</mat-form-field>
</td>
</tr>
<tr>
<td colspan="2">
<mat-form-field class="demo-full-width">
<input formControlName="Email" matInput placeholder="Email">
<mat-hint>use like : [email protected]</mat-hint>
<mat-error>
<span *ngIf="!regiForm.get('Email').valid && regiForm.get('Email').touched">Enter proper Email !!!</span>
</mat-error>
</mat-form-field>
</td>
</tr>
<tr>
<td colspan="2">
<mat-slide-toggle formControlName="IsAccepted" (change)="onChange($event)">Accept Terms & Conditions</mat-slide-toggle>
</td>
</tr>
<tr>
<td colspan="2" class="content-center">
<button mat-raised-button color="accent" [disabled]="!regiForm.valid || IsAccepted==0">Submit</button>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</mat-card-content>
</mat-card>

Step 5

For binding our Form controls, we should call FormControl from our component, that binds all template controls to our form elements.

For that I have used FormGroup, which holds all the template elements that we have used in our template [html portion].

// By : Manav Pandya
import { Component } from '@angular/core';
// Must import to use Forms functionality
import { FormBuilder, FormGroup, Validators ,FormsModule,NgForm } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
regiForm: FormGroup;
FirstName:string='';
LastName:string='';
Address:string='';
DOB:Date=null;
Gender:string='';
Blog:string='';
Email:string='';
IsAccepted:number=0;
constructor(private fb: FormBuilder) {
// To initialize FormGroup
this.regiForm = fb.group({
'FirstName' : [null, Validators.required],
'LastName' : [null, Validators.required],
'Address' : [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])],
'DOB' : [null, Validators.required],
'Gender':[null, Validators.required],
'Blog':[null, Validators.required],
'Email':[null, Validators.compose([Validators.required,Validators.email])],
'IsAccepted':[null]
});
}
// On Change event of Toggle Button
onChange(event:any)
{
if (event.checked == true) {
this.IsAccepted = 1;
} else {
this.IsAccepted = 0;
}
}
// Executed When Form Is Submitted
onFormSubmit(form:NgForm)
{
console.log(form);
}
}

As you can see I have provided comments so you can understand easily why I've used them.

Apart from the constructor, I also used 2 methods with it,

onChange(): to trigger value of toggle button to locate its value, and based on the value iIm enabling or disabling submit button.
onFormSubmit(): Our base method which is used to get all the values of a form when the user submits the form, and also I have logged submitted data to console, so we will get to know the data captured.

Final Output

open browser console and you can see output like this.

Conclusion

Let's wrap up this second part of the series of Angular material with Reactive forms.

So far we have learned,

Angular Material Component
Reactive Form
Form Validations

If I missed anything, feel free make suggestions anytime.

Stay tuned for some interesting articles.

31 Comments

Join the conversation! Your thoughts help the community grow.

Mukta Gadgil5y ago
Thanks a lot! It works in mat-dialog! Now I hope you could have shown how to show multiple checkboxes and how to validate them in typescript
Phúc Trần5y ago
Thank you very much
Kart Madava7y ago
Thanks for the details!! I have multiple formgroups and trying to read the form fields but getting only the first formgroup values to send my backend service. How to obtain values of other formgroups.
Naresh Singhal7y ago
Excellent article bro Manav Pandya ...Keep it up...
- Manav Pandya7y ago
  Thanks Naresh Singhal bhai
Prakash K7y ago
I need for solution datepicker value binding how to assign formgroup?
manisha verma7y ago
Great article
Sujata Kullarkar8y ago
Great article
Minbro8y ago
I am not good at English, but I could solve the problem that I was wandering for hours. thank you :)
- Manav Pandya8y ago
  What problem, can you share
vanita nikam8y ago
Hello ,how to get the value onFormSubmit(form:NgForm) { console.log(form); }....how to pass form values to my service method
- Manav Pandya8y ago
  You can pass your formGroup variable to service method body directly like : this.formGroup.value, which contains whole form's data,Thanks
Jay Desai8y ago
Date picker.... that is exactly what I was looking for. by the way is there a way I can manage format of that date ? I mean can I save it in formGroup object like mm/dd/yyyy ?
Samuel Pariona8y ago
Have a question. you use validators.email. but where do you crate that .email. how do you validate that email input?
- EMMANUEL OKELLO8y ago
  Validators.email is done behind the scene by angular, what you will do exactly with vanilla javascript.
Bikash Sahu8y ago
Thanks for sharing.
Manav Pandya8y ago
Thank you for your kind reply , sure you can ask me anytime Ahmed Alhisaie
Ahmed Alhisaie8y ago
Thanks a lot, I've read many of tutorial but, I couldn't understand properly. I've read your tutorial and easily I've got it , I'm gonna apply it by tomorrow. I'm going to send you my feedback and if there is any misunderstanding . Thanks a lot
- Manav Pandya8y ago
  Thanks for feedback Ahmed Alhisaie
HEMANG THANKI8y ago
Did anyone try setting value for <mat-slide-toggle>with .setValue/.patchValue methods?
Manav Pandya8y ago
Thanks for your read Rahul Saraswat
Rahul8y ago
Nice article bro :)
Hiten Pandya8y ago
Nice article on Angular material .... Good share.
Manav Pandya8y ago
Thanks bro Bhavesh Jadav ........
Bhavesh Jadav8y ago
Good explaination in deep, thanks to share
Manav Pandya8y ago
Thanks sir Naresh Singhal .........
Naresh Singhal8y ago
Very Good Explained.....
Manav Pandya8y ago
Thanks for your valuable comment sir Rathrola Prem Kumar
Rathrola Prem Kumar8y ago
Great !!... Nice Explanation too :)
Manav Pandya8y ago
Glad you liked it Dharmraj Thakur ....
Dharmraj Thakur8y ago
Greate Manav... Keep Writing...