Angular PrimeNG Form InputMask Properties 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 calendar component in angular ngx bootstrap.

InputMask Component: This component is used to enter input in a certain format such as numeric, date, currency and phone.

Property Used:

• type: This property is used to define the HTML5 input type.
• mask: This property is used to define the mask pattern.
• slotChar: This property is used to define the placeholder character in the mask, the default is underscored.
• autoClear: This property is used to clear the incomplete value on blur.
• unmask: This property is used to Define if ngModel sets the raw unmasked value to the bound value or the formatted mask value.
• style: This property is used to define the inline style of the input field.
• styleClass: This property is used to define the style class of the input field.
• placeholder: This property is used to define the advisory information to display on input.
• size: This property is used to define the size of the input field.
• maxlength: This property is used to define the maximum number of characters allowed in the input field.
• tabindex: This property is used to specify the tab order of the element.
• disabled: This property is used to specify that the element value cannot be altered.
• readonly: This property is used to specify that an input field is read-only.
• name: This property is used to define the name of the input field.
• inputId: This property is used to define the identifier of the focus input to match a label defined for the component.
• required: This property is used to specify that an input field must be filled out before submitting the form.
• characterPattern: This property is used to define the regex pattern for alpha characters
• autoFocus: This property is used to define the input gets a focus automatically on load.
• showClear: This property is used to clear icon is displayed to clear the value.
• autocomplete: This property is used to define a string that autocompletes attributes to the current element.
• ariaLabel: This property is used to define a string that labels the input element.
• ariaRequired: This property is used to indicate that user input is required on an element before a form can be submitted.
• title: This property is used to define the title text of the input text.

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: 

Example 1: In the below code, we will be using the above properties to demonstrate the use of the Form InputMask Properties Component.

app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>A computer science portal for geeks</h3>

    <h4>
        Angular PrimeNG Form InputMask
        Properties Component
    </h4>

    <div class="p-grid p-fluid">
        <div class="p-col-12 p-md-6 p-lg-4">
            <span>GFG</span>
            <p-inputMask mask="99-999999"
                [(ngModel)]="val1"
                placeholder="+91-">
            </p-inputMask>
        </div>
    </div>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    val1: string;
    val2: string;
    val3: string;
    val4: string;
    val5: string;
    val6: string;
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 the below code, we will be using the above properties to demonstrate the use of the Form InputMask Properties Component.

app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>A computer science portal for geeks</h3>

    <h4>
        Angular PrimeNG Form InputMask
        Properties Component
    </h4>

    <div class="p-col-12 p-md-6 p-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999"
            [(ngModel)]="val3"
            placeholder="mm/dd/yyyy"
            slotChar="mm/dd/yyyy">
        </p-inputMask>
    </div>
</div>

app.component.ts

Javascript

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    val1: string;
    val2: string;
    val3: string;
    val4: string;
    val5: string;
    val6: string;
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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://www.primefaces.org/primeng/inputmask