6 Digit OTP Number Validation Angular Example | Angular 13 tutorial

Share the post

Hello All, In this angular 13 tutorial, We will discuss 6 Digit OTP Number Validation Angular. In the last angular tutorial, We had discussed  Display JSON Data In Angular using AG-Grid applications.

In reactive forms, We need to validate 6 digits OTP numbers. This can be validated using Validators from angular forms. We can validate the OTP number with the help of a regex pattern. Also, If this field is compulsory/required then also we can validate it. So, 6 Digit OTP Number Validation is covered in this tutorial.

Steps required for OTP number validation in angular 13

  • Step1: Create Angular Project
  • Step2: Import ReactiveFormsModule & FormsModule
  • Step3: Update Template
  • Step4: Update TS Code
  • Step5: Update SCSS
  • Step6: Run & See the Output

Step1: Create Angular Project

Create a new angular project using the below command.

ng new <APPNAME>



Now, move to our root project directory using the following command

cd <APPNAME>



Open the newly created angular project in Visual Studio Code. Use the following command to open the project.

code .

Step2: Import ReactiveFormsModule & FormsModule

Now, We need to import two modules ReactiveFormsModule & FormsModule from angular forms. We import these modules as follows

Update app.module.ts as shown below

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step3: Update Template

Now, We have to update our HTML template. We will use the form element which contains the input field for OTP number. Then, We will give the FormGroup name which is a valid name for the form. After that, For every input element, We need to give formControlName. In this example, We are only using the OTP number input field. So, We are using only one formControlName. On the bottom side, We use one button which handles the click event. In this event, We will capture the input field value.

Update the app.component.html as shown below

<div>
  <form [formGroup]="formGrp" novalidate>
    <div>
      <label>OTP Number(6 Digit)</label>
      <label class="show-error">*</label><br>
      <input type="number" formControlName="otpNoCtrl" [(ngModel)]="otpNo"
        placeholder="Please enter OTP" >

      <div *ngIf="otpnumber['otpNoCtrl'].touched && otpnumber['otpNoCtrl'].invalid" class="show-error">
        <div *ngIf="otpnumber['otpNoCtrl'].errors?.['required'] && otpnumber['otpNoCtrl'].dirty">Please enter OTP
          number
        </div>
        <div *ngIf="otpnumber['otpNoCtrl'].errors?.['pattern'] && otpnumber['otpNoCtrl'].dirty"> 6 digit OTP required
        </div>
      </div>
    </div>

    <div>
      <button type="submit" [disabled]="!formGrp.valid" (click)="doSubmit()">Save</button>
    </div>
  </form>
</div>

Step4: Update TS Code

In our TypeScript file, We need to import FormBuilder, FormGroup, and Validators from angular forms.

Update app.component.ts as shown below

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {


  formGrp: FormGroup;
  otpNo: number;

  constructor(formBuilder: FormBuilder) {
    this.otpNo = 0;
    this.formGrp = formBuilder.group({
      otpNoCtrl: ['', [Validators.required, Validators.pattern("[0-9]{6}")]]
    })
  }

  get otpnumber() {
    return this.formGrp.controls;
  }

  doSubmit() {
    console.log(this.formGrp.value);
    console.log(this.otpNo);
  }

}

Step5: Update SCSS

We are showing the error part using CSS as shown below.

Update app.component.scss

.show-error{
    color: red;
}

Step6: Run & See the Output

Now, Everything is done. Just need to run the angular application & see the output.

Run the Angular application using the below command

ng serve

Output

In this output, We can get the input values using two ways. One is from form value & another uses ngModel.

OTP number validation output

Leave a Comment

Exit mobile version