Angular PrimeNG Form InputMask Events Component
Angular PrimeNG is a collection of Angular UI components. It is an open-source library developed by PrimeTek. It has many ready-to-use components that make it one of the top choices of angular developers when it comes to choosing a UI library. In this article, we will see the Angular PrimeNG Form InputMask Events Component.
The InputMask Component provides the user with a specific format that he has to abide by when entering the data. The data can be anything such as date, phone number, currency, etc. There are a total of 6 events that are fired when the user interacts with the InputMask component.
Angular PrimeNG Form InputMask Events:
- onFocus: This accepts a callback to trigger when the InputMask receives the focus.
- onBlur: This accepts a callback to trigger when the InputMaskgoes out of focus.
- onComplete: This accepts a callback to trigger when the user completes the pattern of the InputMask.
- onInput: This accepts a callback to trigger when the InputMask's value is changed.
- onClear: This accepts a callback to trigger when the value of the InputMask is cleared.
- onKeydown: This accepts a callback to trigger when the InputMask input receives a keydown event.
There are a few Form properties provided by the Angular PrimeNG, which are described below:
- mask: This property is used to define the pattern of value the user can enter. It can contain:
- a - Alpha character (default: A-Z,a-z)
- 9 - Numeric character (0-9)
- * - Alphanumeric characters (A-Z,a-z,0-9)
- placeholder: This property is used to set a placeholder for the InputMask component.
- showClear: When this is true, a clear icon is shown to clear the value of the InputMask.
Syntax:
<p-inputMask
[(ngModel)]="..."
(inputmask-event)="callbackToInvoke()"
placeholder="99999-99999"
mask="99999-99999">
</p-inputMask>
Creating Angular application and Installing the Modules:
Step 1: Create an Angular application using the following command.
ng new myapp
Step 2: After creating your project folder i.e myapp, move to it using the following command.
cd myapp
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: After completing the above steps, the structure will look like the following:
Example 1: This example illustrates the use of the onFocus, onBlur, and the onInput events of the InputMask component. Whenever one of these events is fired, a toast message is shown.
- app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Events Component</h3>
<h4>
InputMask Events -
onInput, onFocus, and OnBlur Event
</h4>
<p-inputMask [(ngModel)]="maskValue"
(onFocus)="maskFocus()"
(onBlur)="maskBlur()"
(onInput)="maskInput()"
placeholder="aaaaa-99999"
mask="aaaaa-99999">
</p-inputMask>
<p-toast></p-toast>
- app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageService]
})
export class AppComponent {
constructor(private mService: MessageService) { }
maskValue: string = "";
maskFocus() {
this.mService.add({
severity: "success",
summary: "InputMask Gets Focus",
detail: "onFocus Event Fired"
})
}
maskBlur() {
this.mService.add({
severity: "error",
summary: "InputMask Loses Focus",
detail: "onBlur Event Fired"
})
}
maskInput() {
this.mService.add({
severity: "info",
summary: "InputMask Value Changed",
detail: "onInput Event Fired"
})
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { InputMaskModule } from 'primeng/inputmask';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputMaskModule,
FormsModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
Output:
Example 2: In this example, we used the onComplete, onClear, and onKeydown events of the InputMask component to show a toast message whenever these events are triggered.
- app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Events Component</h3>
<h4>
InputMask Events -
onClear, onComplete, and onKeydown Event
</h4>
<p-inputMask [(ngModel)]="maskValue"
(onClear)="maskClear()"
(onComplete)="maskComplete()"
(onKeydown)="maskKeyDown()"
placeholder="aa-99"
[showClear]="true"
mask="aa-99">
</p-inputMask>
<p-toast></p-toast>
- app.component.ts
import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageService]
})
export class AppComponent {
constructor(private mService: MessageService) { }
maskValue: string = "";
maskClear() {
this.mService.add({
severity: "error",
summary: "InputMask Value Cleared",
detail: "onClear Event Fired"
})
}
maskComplete() {
this.mService.add({
severity: "success",
summary: "InputMask Pattern Completed",
detail: "onComplete Event Fired"
})
}
maskKeyDown() {
this.mService.add({
severity: "info",
summary: "KeyDown Event",
detail: "onKeydown Event Fired"
})
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { InputMaskModule } from 'primeng/inputmask';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputMaskModule,
FormsModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
Output:
Reference: https://www.primefaces.org/primeng/inputmask
