Hello All, In this angular 13 example, We will discuss How to implement Pin Code validation in Angular 13 applications. In the last angular 13 validation tutorial, We had discussed How to implement Mobile Number Validation In Angular 13.
In reactive forms, We need to validate 6 digit pin code number. This can be validated using Validators from angular forms. We can validate the pin code number with the help of a regex pattern. Also, If this field is compulsory/required then also we can validate it. So, This validation is covered in this tutorial. We will discuss here one example, Which validates 6 digit pin code number.
Table of Contents
Steps required for Pin Code 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 following command.
ng new <APPNAME>
Now, move to our root project directory using the below 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 pin code. 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 pin code 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
<form [formGroup]="formGrp" novalidate class="formCls">
<div>
<label>Pin Code (6 Digit)</label>
<label class="show-error">*</label><br>
<input type="tel" formControlName="pincdctrl" [(ngModel)]="pinCode" placeholder="Please enter pin code here"
minlength="6" maxlength="6">
<div *ngIf="pincodeno['pincdctrl'].touched && pincodeno['pincdctrl'].invalid" class="show-error">
<div *ngIf="pincodeno['pincdctrl'].errors?.['required'] && pincodeno['pincdctrl'].dirty">Please enter pin code
</div>
<div *ngIf="pincodeno['pincdctrl'].errors?.['pattern'] && pincodeno['pincdctrl'].dirty"> 6 digit pin code required
</div>
</div>
</div>
<div>
<button type="submit" [disabled]="!formGrp.valid" (click)="doSubmit()">Save</button>
</div>
</form>
Step4: Update TS Code
In our TypeScript file, We need to import FormBuilder, FormGroup, 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;
pinCode: number;
constructor(formBuilder: FormBuilder) {
this.pinCode = 0;
this.formGrp = formBuilder.group({
pincdctrl: ['', [Validators.required, Validators.pattern("[0-9]{6}")]]
})
}
get pincodeno() {
return this.formGrp.controls;
}
doSubmit() {
console.log(this.formGrp.value);
console.log(this.pinCode);
}
}
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
OR
npm run start
Output
In this output, We can get the input values using two ways. One is from form value & another uses ngModel.

1 thought on “Pin Code validation in Angular 13 | Angular 13 tutorial”