Validations in Angular Part 2 [MDF Validations]

 example to build a user model with collection of props by applying mdf validations

Create a component.

ng g c mdf1 --flat

Index.html

appModule.ts

Change the Bootstrap Name to the newly created component.

.ts Changes

First, we need to import the namespace

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

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

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

@Component({

  selector: 'app-mdf1',

  templateUrl: './mdf1.component.html',

  styleUrls: ['./mdf1.component.css']

})

export class Mdf1Component  implements OnInit{

userModel:FormGroup;

info:string | undefined;

  constructor() {

   //build a model

   this.userModel=new FormGroup(

     {

       firstname:new FormControl("",[Validators.required]),

       lastname:new FormControl("",[Validators.required]),

       emailid:new FormControl("xyz@gmail.com",[Validators.email])

     },{updateOn:'change'}

   );

   }

   register()

   {

     if(this.userModel.valid)

     this.info=this.userModel.value.firstname+":"+this.userModel.value.lastname+":"+this.userModel.value.emailid;

   }

}

.html Changes

<form [formGroup]="userModel" (ngSubmit)="register()">

    <div style="font-size: x-large;margin: 20px;">

        firstname:<input formControlName="firstname">

        <span *ngIf="userModel.controls['firstname'].invalid">

            enter firstname

        </span>

        <br>

        lastname:<input formControlName="lastname">

        <span *ngIf="userModel.controls['lastname'].invalid && userModel.controls['lastname'].touched">

            enter lastname..

        </span>

        <br>

        emailid:<input formControlName="emailid">

        <span *ngIf="userModel.controls['emailid'].invalid">

            enter valid emailid

        </span>

        <br>

        <input type="submit" value="register">

        <br>

        {{info}}

        <br>

        {{userModel.value|json}}

    </div>

</form>

AppModule.ts

Output

Explanation

note:
-----
1.styles declared with in styles.css will be global through out the project

2.initially firstname property value is blank,this makes required validation failed
  initially,in this case invalid will return true,so span will show error message
  [enter firstname] initially,initial errormessage display for required validation
  can be avoided using touched property along with invalid
  [this is done for lastname prop]

Modify the above html as

        firstname:<input formControlName="firstname">

        <span *ngIf="userModel.controls['firstname'].invalid && userModel.controls['firstname'].touched">

            enter firstname

        </span>

3.submit button click will call ngsubmit event of form tag,this will
  execute register function

4.control data------>property-----validation-----invalid prop will be
                                                  set with true | false--no error message display
                                                            |
                                                     error message display

5.updateOn will specify, when the controls data to be updated to model props and
  validation should take place
  
 i.change[default]--control editing will be applied to model prop and
                      validation takes place

  ii.blur           --control loosing focus will be applied to model prop and
                      validation takes place

 iii.submit         --submit button click will update all the controls data to all the
                      props and validations will take place