Post
Ask Question

Angular Form Validation

In this blog, I will show you these types of form validations to use in your live project.
  • Mobile No Validation
  • Email Validation
  • Pan Validation
  • GST Validation
  • Aadhar Validation 

Mobile No Validation

 
Angular Form Validation
Mobile No Validation code,
  1. <div class="col-md-4">  
  2.     <div class="form-group">  
  3.         <mat-form-field class="example-full-width">  
  4.             <input matInput name="mobile" #model="ngModel" pattern="[0-9 -()+]+$" minlength="10"  
  5. maxlength="10" placeholder="Mobile Number" [(ngModel)]="Customer.mobileNo" required>  
  6.                 <mat-error *ngIf="model.errors?.pattern">  
  7. Invalid Mobile Number  
  8. </mat-error>  
  9.             </mat-form-field>  
  10.         </div>  
  11.     </div>  
After applying this code, the output will be like below.
 
Angular Form Validation

Email Validation

Angular Form Validation
Email Validation code,
  1. <div class="col-md-4">  
  2.     <div class="form-group">  
  3.         <mat-form-field class="example-full-width">  
  4.             <input matInput placeholder="Email Id" name="email" #modelmail="ngModel"  
  5. pattern="[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*"   
  6. [(ngModel)]="Customer.emailId">  
  7.                 <mat-error *ngIf="modelmail.errors?.pattern">  
  8. Please Enter A Valid EmailId  
  9. </mat-error>  
  10.             </mat-form-field>  
  11.         </div>  
After applying this code, the output will be like below.
 
Angular Form Validation

Pan Validation

 
Angular Form Validation 
Pan Validation Code,
  1. <div class="col-md-6">  
  2.     <div class="form-group">  
  3.         <mat-form-field class="example-full-width">  
  4.             <input matInput #panNo maxlength="10" minlength="10" placeholder="Enter PAN Number."  
  5. name="PAN" required (blur)="ChkPANnonoDuplicacay(Customer.panNo,'customer')"  
  6. pattern="^[A-Za-z]{5}[0-9]{4}[A-Za-z]$" #PANno1="ngModel"  
  7. [(ngModel)]="Customer.panNo">  
  8.                 <mat-hint align="end">{{panNo.value.length}}/10</mat-hint>  
  9.                 <mat-error *ngIf="PANno1.errors?.pattern">  
  10. Invalid PAN Number Format  
  11. </mat-error>  
  12.                 <mat-error *ngIf="PANnoMsg != '' ">  
  13. {{PANnoMsg}}  
  14. </mat-error>  
  15.             </mat-form-field>  
  16.         </div>  
  17.     </div>  
After applying this code, the output will be like below.
 
Angular Form Validation

GST Validation

Angular Form Validation
GST Validation Code, 
  1. <div class="col-md-6">  
  2.     <div class="form-group">  
  3.         <mat-form-field class="example-full-width">  
  4.             <input matInput #gSTNumber (blur)="ChkgSTNumberDuplicacay(Customer.gstNumber,'customer')"  
  5. minlength="15" maxlength="15" placeholder="Enter GST Number" name="GST"  
  6. [(ngModel)]="Customer.gstNumber" #modelcustomertorsgst="ngModel"  
  7. pattern="^[0-9]{2}[A-Za-z]{5}[0-9]{4}[A-Za-z]{1}[0-9]{1}[A-Za-z]{1}[0-9]{1}$">  
  8.                 <mat-hint align="end">{{gSTNumber.value.length}}/15</mat-hint>  
  9.                 <mat-error *ngIf="modelcustomertorsgst.errors?.pattern">  
  10. Please Enter A Valid GST Number  
  11. </mat-error>  
  12.                 <mat-error *ngIf="gSTNumberMsg != ''">  
  13. {{gSTNumberMsg}}  
  14. </mat-error>  
  15.             </mat-form-field>  
  16.         </div>  
  17.     </div>   
After applying this code, the output will be like below.
Angular Form Validation

Aadhar Validation

Angular Form Validation
Aadhar Validation Code,
  1. <div class="col-md-6">  
  2.     <div class="form-group">  
  3.         <mat-form-field class="example-full-width">  
  4.             <input matInput #aadharcardnumber maxlength="14" minlength="14"  
  5. #modelaadhar="ngModel" (blur)="ChkaadharcardnumberDuplicacay(Customer.aadharcardnumber,'customer')"  
  6. placeholder="Enter Aadhar Card Number" name="Aadhar Number"  
  7. [(ngModel)]="Customer.aadharcardnumber" data-type="adhaar-number"  
  8. maxLength="14" required>  
  9.                 <mat-hint align="end">{{aadharcardnumber.value.length}}/14</mat-hint>  
  10.                 <mat-error *ngIf="modelaadhar.errors?.pattern">  
  11. Please Enter A Valid Aadhaar Card Number  
  12. </mat-error>  
  13.                 <mat-error *ngIf="aadhanorMsg != ''">  
  14. {{aadhanorMsg}}  
  15. </mat-error>  
  16.             </mat-form-field>  
  17.         </div>  
  18.     </div>  
  19. //Include Jquery  
  20. <script type="text/javascript">  
  21. $('[data-type="adhaar-number"]').keyup(function () {  
  22.    var value = $(this).val();  
  23.    value = value.replace(/\D/g, "").split(/(?:([\d]{4}))/g).filter(s =>  
  24.    s.length > 0).join("-");  
  25.    $(this).val(value);  
  26.    });  
  27.    $('[data-type="adhaar-number"]').on("change, blur", function () {  
  28.       var value = $(this).val();  
  29.       var maxLength = $(this).attr("maxLength");  
  30.       if (value.length != maxLength) {  
  31.          $(this).addClass("highlight-error");  
  32.       } else {  
  33.          $(this).removeClass("highlight-error");  
  34.       }  
  35.    });  
  36. </script>  
After applying this code, the output will be like below.
Angular Form Validation
 
Hope you like this blog.
 
Please share your valuable feedback in the comment section below. 
 
Happy Coding :)