Pin Code Validation Example In Ionic 5

Share the post

Hello All, In this Ionic 5 Example, We will learn Pin Code Validation Example In Ionic 5. We will see How to validate pin code in the Ionic 5 application with the help of a simple example. In the last Ionic 5 tutorial, We had discussed How to check device is rooted or not in the Ionic application.

In this Ionic 5 example, We will take simple input in the form which will allow us to ender pin code. We will Create a FormGroup & formControlName for the input field to validate the pin code.

Steps for Pin Code Validation Example In Ionic 5 application

  • Step 1: Create a new Ionic application
  • Step 2: Import ReactiveFormsModule, FormsModule
  • Step 3: Update HTML
  • Step 4: Update TS
  • Step 5: Update CSS
  • Step 6: Run the application
  • Step 7: Output

  • Step 1: Create a new Ionic application
  • We will create a new ionic application to check the Pin Code Validation Example In Ionic 5. Use the following command to create a new ionic application

    ionic start myApp blank
    
    

    Open newly created project in Visual Studio Code using the following command

    code .
    

  • Step 2: Import ReactiveFormsModule, FormsModule
  • Now, We need to import two important modules ReactFormsModule & FormsModule from @angular/forms. Please see the complete app.module.ts file as shown below

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';
    import { ReactiveFormsModule, FormsModule } from '@angular/forms';
    
    import { HomePage } from './home.page';
    
    import { HomePageRoutingModule } from './home-routing.module';
    import { Ng2GoogleChartsModule } from 'ng2-google-charts';
    
    
    @NgModule({
      imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        IonicModule,
        HomePageRoutingModule,
        Ng2GoogleChartsModule
      ],
      declarations: [HomePage],
      providers: []
    })
    export class HomePageModule { }
    
    

  • Step 3: Update HTML
  • Update the home.page.html file as shown below. As discussed, We are using single input for pin code & button to get entered pin code value on click event.

    <ion-header [translucent]="true">
      <ion-toolbar>
        <ion-title>
          Pin Code Validation In Ionic
        </ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content [fullscreen]="true">
      <form [formGroup]="formGrp" novalidate class="formCls">
    
        <div>
          <ion-list>
            <ion-item>
              <ion-label>Pin Code (6 Digit)</ion-label>
              <ion-input type="tel" formControlName="pincdctrl" [(ngModel)]="pinCode"
                placeholder="Please enter pin code here"></ion-input>
            </ion-item>
            <div class="show-error">
              <div *ngIf="formGrp.get('pincdctrl').hasError('required') && formGrp.get('pincdctrl').dirty">Please enter pin
                code
              </div>
              <div *ngIf="formGrp.get('pincdctrl').hasError('pattern') && formGrp.get('pincdctrl').dirty">
                Please enter correct pin code</div>
            </div>
          </ion-list>
        </div>
    
        <ion-item>
          <ion-button color="primary" full class="common-button" [disabled]="!formGrp.valid" (click)="doSubmit()">Save
          </ion-button>
        </ion-item>
      </form>
    </ion-content>
    

  • Step 4: Update TS
  • Now, We will import FormBuilder, FormGroup & Validators from @angular/forms to validate pin code. Update home.page.ts as shown below.

    import { Component } from '@angular/core';
    import { FormBuilder, FormGroup, Validators } from '@angular/forms';
    
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss']
    })
    
    export class HomePage {
    
      formGrp: FormGroup;
      pinCode: number;
    
      constructor(formBuilder: FormBuilder) {
        this.formGrp = formBuilder.group({
          pincdctrl: ['', [Validators.required, Validators.pattern("[0-9]{6}")]]
        })
      }
    
      doSubmit() {
        console.log(this.formGrp.value);
        console.log(this.pinCode);
      }
    
    }
    
    

    Also, We had written the doSubmit() function to get the value of entered pin code from the form group value & model. So, In this example, We will fetch the pin code value using two methods. One from the form group & the second from the model.

  • Step 5: Update CSS
  • Update the home.page.scss as shown below

    .formCls{
        margin-top: 20px;
    }
    
    .show-error{
        padding-top: 0.2rem;
        color: red;
        font-size: 12px;
    }
    
    

  • Step 6: Run the application
  • to run the application on android use the following command

    ionic cordova run android
    

    OR

    If you want to run the application on a browser use the following command

    ionic serve
    

  • Step 7: Output
  • Pin Code Validation Example In Ionic 5
    Pin Code Validation Example In Ionic 5

    1 thought on “Pin Code Validation Example In Ionic 5”

    Leave a Comment