Angular PrimeNG InputMask Component - GeeksforGeeks

03 Aug, 2021
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
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.cd appname
cd appname
Step 3: Install PrimeNG in your given directory.npm install primeng --save
npm install primeicons --save
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
Angular-PrimeNG
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?