Validations in Angular Part 3 [MDF Validations]

 FormBuilder class

-----------------
This is used to build a model [ formgroup ] with collection of props without using
 FormControl class

Syntax:
  this.<formgroup>=this.<formbuilder>.group({
                   prop1:["",[validations]],
                       ...
                                 },{updateOn:'..'});

*requirement:

   JobModel
      |
 username   --required
                     pattern[username should allow lower, upper, dot and spaces].

 password   --min length 4 chars
                    max length 8 chars

 mobile      --pattern[10 digit number]----property level updateOn blur

 gender     --required[radiobuttons]

 skillset      --required[listbox-multiple selection--> select tag with multiple]

 country     --required[dropdownlist-single selection-->select tag without multiple]

  terms       --requiredTrue[checkbox]


Create a component











.ts Changes

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-mdf2',
  templateUrl: './mdf2.component.html',
  styleUrls: ['./mdf2.component.css']
})
export class Mdf2Component  implements OnInit{
  _formbuilder:FormBuilder;
  jobmodel:FormGroup;
  info:string | undefined;
  
  constructor() {
    this._formbuilder=new FormBuilder();
    //build a model
    this.jobmodel=this._formbuilder.group({
      username:["",[Validators.required,Validators.pattern("[A-Za-z.\\s]{1,}")]],
      password:["",[Validators.minLength(4),Validators.maxLength(8)]],
      mobile:["",  {validators:[Validators.pattern("[0-9]{10}")],updateOn:'blur'}],
      gender:["",  [Validators.required]],
      skillset:["",[Validators.required]],
      country:["", [Validators.required]],
      terms:  [""  ,[Validators.requiredTrue]]
             });
   }
  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }
   register()
   {
     this.info=this.jobmodel.value.username+":"+this.jobmodel.value.password+":"+this.jobmodel.value.mobile+":"+this.jobmodel.value.gender+":"+this.jobmodel.value.skillset+":"+this.jobmodel.value.country+":"+this.jobmodel.value.terms;
   }
}


.html Changes


<form [formGroup]="jobmodel">
    <div style="font-size:x-large;margin:20px">
        <input formControlName="username" placeholder="username">
        <span *ngIf="jobmodel.controls['username'].hasError('required')">enter username</span>
        <span *ngIf="jobmodel.controls['username'].hasError('pattern')">enter proper username</span>
        <br>
        <input formControlName="password" placeholder="password">
        <span *ngIf="jobmodel.controls['password'].invalid">enter password between 4 to 8 chars</span>
        <br>
        <input formControlName="mobile" placeholder="mobile">
        <span *ngIf="jobmodel.controls['mobile'].invalid">enter 10 digit</span>
        <br>
        <input type="radio" formControlName="gender" value="male"> male
        <input type="radio" formControlName="gender" value="female"> female
        <span *ngIf="jobmodel.controls['gender'].invalid">select gender</span>
        <br>
        skillset:<br>
        <select formControlName="skillset" multiple size="3" style="width: 120px;">
            <option>angular</option>
            <option>reactjs</option>
            <option>core</option>
            <option>aws</option>
        </select>
        <span *ngIf="jobmodel.controls['skillset'].invalid">select skillset</span>
        <br>
        <select formControlName="country">
            <option value="">country</option>
            <option value="ind">india</option>
            <option value="usa">united states</option>
        </select>
        <span *ngIf="jobmodel.controls['country'].invalid">select country</span>
        <br>
        <input type="checkbox" formControlName="terms"> I agree terms and conds
        <br>
        <span *ngIf="jobmodel.controls['terms'].invalid">select terms and conds</span>
        <br>
        <input type="button" value="register" (click)="register()" [disabled]="jobmodel.invalid">
        <br>
        {{info}}
    </div>
</form>


styles.css

input.ng-invalid{
    border:2px solid red;
  }

Note:
-----
* input.ng-invalid css will be applied to textbox,if validation is failed.
*user selected skillset options will be assigned to model prop,the options
 will be seperated by ,

Output