Angular Form Validation

In this blog, I will show you some basic form validations in Angular using TypeScript.

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

 

Mobile No Validation code,

<div class="col-md-4">
    <div class="form-group">
        <mat-form-field class="example-full-width">
            <input matInput name="mobile" #model="ngModel" pattern="[0-9 -()+]+$" minlength="10"
maxlength="10" placeholder="Mobile Number" [(ngModel)]="Customer.mobileNo" required>
                <mat-error *ngIf="model.errors?.pattern">
Invalid Mobile Number
</mat-error>
            </mat-form-field>
        </div>
    </div>

After applying this code, the output will be like below.

 

Email Validation

Email Validation code,

<div class="col-md-4">
    <div class="form-group">
        <mat-form-field class="example-full-width">
            <input matInput placeholder="Email Id" name="email" #modelmail="ngModel"
pattern="[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*"
[(ngModel)]="Customer.emailId">
                <mat-error *ngIf="modelmail.errors?.pattern">
Please Enter A Valid EmailId
</mat-error>
            </mat-form-field>
        </div>

After applying this code, the output will be like below.

 

Pan Validation

 

 

Pan Validation Code,

<div class="col-md-6">
    <div class="form-group">
        <mat-form-field class="example-full-width">
            <input matInput #panNo maxlength="10" minlength="10" placeholder="Enter PAN Number."
name="PAN" required (blur)="ChkPANnonoDuplicacay(Customer.panNo,'customer')"
pattern="^[A-Za-z]{5}[0-9]{4}[A-Za-z]$" #PANno1="ngModel"
[(ngModel)]="Customer.panNo">
                <mat-hint align="end">{{panNo.value.length}}/10</mat-hint>
                <mat-error *ngIf="PANno1.errors?.pattern">
Invalid PAN Number Format
</mat-error>
                <mat-error *ngIf="PANnoMsg != '' ">
{{PANnoMsg}}
</mat-error>
            </mat-form-field>
        </div>
    </div>

After applying this code, the output will be like below.

 

GST Validation

GST Validation Code, 

<div class="col-md-6">
    <div class="form-group">
        <mat-form-field class="example-full-width">
            <input matInput #gSTNumber (blur)="ChkgSTNumberDuplicacay(Customer.gstNumber,'customer')"
minlength="15" maxlength="15" placeholder="Enter GST Number" name="GST"
[(ngModel)]="Customer.gstNumber" #modelcustomertorsgst="ngModel"
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}$">
                <mat-hint align="end">{{gSTNumber.value.length}}/15</mat-hint>
                <mat-error *ngIf="modelcustomertorsgst.errors?.pattern">
Please Enter A Valid GST Number
</mat-error>
                <mat-error *ngIf="gSTNumberMsg != ''">
{{gSTNumberMsg}}
</mat-error>
            </mat-form-field>
        </div>
    </div>

After applying this code, the output will be like below.

Aadhar Validation

Aadhar Validation Code,

<div class="col-md-6">
    <div class="form-group">
        <mat-form-field class="example-full-width">
            <input matInput #aadharcardnumber maxlength="14" minlength="14"
#modelaadhar="ngModel" (blur)="ChkaadharcardnumberDuplicacay(Customer.aadharcardnumber,'customer')"
placeholder="Enter Aadhar Card Number" name="Aadhar Number"
[(ngModel)]="Customer.aadharcardnumber" data-type="adhaar-number"
maxLength="14" required>
                <mat-hint align="end">{{aadharcardnumber.value.length}}/14</mat-hint>
                <mat-error *ngIf="modelaadhar.errors?.pattern">
Please Enter A Valid Aadhaar Card Number
</mat-error>
                <mat-error *ngIf="aadhanorMsg != ''">
{{aadhanorMsg}}
</mat-error>
            </mat-form-field>
        </div>
    </div>
//Include Jquery
<script type="text/javascript">
$('[data-type="adhaar-number"]').keyup(function () {
   var value = $(this).val();
   value = value.replace(/\D/g, "").split(/(?:([\d]{4}))/g).filter(s =>
   s.length > 0).join("-");
   $(this).val(value);
   });
   $('[data-type="adhaar-number"]').on("change, blur", function () {
      var value = $(this).val();
      var maxLength = $(this).attr("maxLength");
      if (value.length != maxLength) {
         $(this).addClass("highlight-error");
      } else {
         $(this).removeClass("highlight-error");
      }
   });
</script>

After applying this code, the output will be like below.

 

Hope you like this blog.

 

Please share your valuable feedback in the comment section below. 

 

Happy Coding :)