Angular PrimeNG InputMask Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the InputMask component in angular primeNG.

InputMask component allows a user to input value in a certain format which includes numeric, date, currency and phone.

Properties:

• type: It defines an input type in HTML5. 
• mask: It defines the pattern of the mask.
• slotChar: It is a mask’s placeholder character, & the default value is an underscore.
• autoClear: It defines the property to help to clear the incomplete value on blur.
• unmask: This property is defined only if ngModel sets the raw unmasked value either to bound value or the formatted mask value.
• style: It defines the inline styling of the input field.
• styleClass: It defines the style class of the input field.
• placeholder: It is used to display advisory information on the input.
• size: It defines the size of the input field.
• maxlength: It allows a maximum number of characters in the input field.
• tabindex: It specifies the tab order of the element.
• disabled: When present in the element tag, it specifies the element value cannot be altered.
• readonly: When present in the element tag, it specifies an input field is read-only.
• name: It specifies the name of the input field.
• inputId: It is an identifier of the focus input that matches a label defined for the component.
• required: When present, it specifies that an input field must be filled out before submitting the form.
• characterPattern: It defines the Regex pattern for alpha characters.
• autoFocus: When present in the element tag, the input gets a focus automatically on load.
• autocomplete: It defines a string that autocompletes an attribute of the current element.
• ariaLabel: It defines a string that labels the input element.
• ariaRequired: It is used to indicate that user input is required on an element before a form can be submitted.
• title: It defines an input text of the title.

Events

• onFocus: Callback to invoke when the input receives focus.
• onBlur: Callback to invoke when the input loses focus.
• onComplete: Callback to invoke on when user completes the mask pattern.
• onInput: Callback to invoke when the input field value is altered.
• onKeydown: Callback to invoke on when the input receives a keydown event.

Creating Angular Application & Module Installation:

• Step 1: Create an Angular application using the following command.

  ng new appname

• Step 2: After creating your project folder i.e. appname, move to it using the following command.

  cd appname

• Step 3: Install PrimeNG in your given directory.

  npm install primeng --save
  npm install primeicons --save

Project Structure: It will look like the following.



Example 1: This is the basic example that shows how to use the InputMask component

app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputMask component</h5>
<div class="p-fluid">
  <div class="p-lg-4">
    <p-inputMask mask="999 999 9999" placeholder="999 999 9999"></p-inputMask>
  </div>
</div>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from
    "@angular/platform-browser/animations";

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

import { InputMaskModule } from "primeng/inputmask";

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

Output:



Example 2: In this example, we will know how to use disabled property in the InputMask component 

app.component.html
<h2>GeeksforGeeks</h2>
<h5>PrimeNG InputMask component</h5>
<div class="p-fluid">
  <div class="p-lg-4">
    <p-inputMask
      [disabled]="true"
      mask="999 999 9999"
      placeholder="999 999 9999"
    ></p-inputMask>
  </div>
</div>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from
    "@angular/platform-browser/animations";

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

import { InputMaskModule } from "primeng/inputmask";

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

Output:



Reference: https://primefaces.org/primeng/showcase/#/inputmask