Angular PrimeNG Form InputMask Events Component
Last Updated :
19 Oct, 2022
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.
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 >
|
Javascript
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"
})
}
}
|
Javascript
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.
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 >
|
Javascript
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"
})
}
}
|
Javascript
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://primefaces.org/primeng/inputmask
Share your thoughts in the comments
Please Login to comment...