Angular Material Design Components With Reactive Form - Part Two

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, 

1.    Template-driven Forms
2.    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 deriven 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,

<!-- Main Toolbar of an App -->
<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>

<!-- Card container that binds all togather -->
<mat-card>
    <!-- Title of an Card -->
    <mat-card-title>
        Angular Material Component With Angular 5
    </mat-card-title>

    <!-- Actual content starts from here -->
    <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 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 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 secind 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.