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 :)