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

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

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"
        })
    }
}

• app.module.ts

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.

• app.component.html

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

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"
        })
    }
}

• app.module.ts

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