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 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,

<!-- 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 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.