Open In App

Angular PrimeNG Form InputMask Optional Values Component

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is a collection of UI components for the Angular framework developed and maintained by Google. It enables developers to develop scalable and responsive interfaces in less time and hence increases productivity. In this article, we will be seeing Angular PrimeNG Form InputMask Optional Values Component.

The InputMask guides the user about what value to enter in the input. It betters the user experience on our application. A part of the Input can be made optional with the ‘?’ symbol. The value after the ‘?’ symbol will be optional. By default, if the user does not complete the input mask and focuses out of it, the value will be cleared automatically. This can be altered by using the autoClear property.

Angular PrimeNG Form InputMask Optional Values Properties:

  • mask: This property defines the pattern for the user to input.
  • type: This property is used to define the input type of the InputMask component.
  • autoClear: If this property is set to false, the mask value will not be clear on input blur.

Syntax:

<p-inputMask 
    [(ngModel)]="maskValue" 
    mask="99-99?99">
</p-inputMask>

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we set the autoClear property to false, so the value of the InputMask will not be cleared on blur.

  • app.component.html:

HTML




<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form InputMask Option Values
</h3>
  
<h4>autoClear set to <i>true</i></h4>
<p-inputMask 
    [(ngModel)]="maskValue1"
    [autoClear]="true"
    placeholder="999-999" 
    mask="999-999">
</p-inputMask>
  
<h4>autoClear set to <i>false</i></h4>
<p-inputMask 
    [(ngModel)]="maskValue2"
    [autoClear]="false" 
    placeholder="999-999"
    mask="999-999">
</p-inputMask>


  • app.component.ts:

Javascript




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    maskValue1!: string;
    maskValue2!: string;
}


  • app.module.ts:

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputMaskModule } from "primeng/inputmask";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        InputMaskModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }


Output:

 

Example 2: This example states the use of the ‘?’ symbol to make some of the mask value optional.

  • app.component.html:

HTML




<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form InputMask Option Values
</h3>
  
<h4>InputMask without <i>?</i> symbol</h4>
<p-inputMask 
    [(ngModel)]="maskValue1"
    placeholder="99-9999" 
    mask="99-9999">
</p-inputMask>
  
<h4>InputMask using <i>?</i> symbol</h4>
<p-inputMask 
    [(ngModel)]="maskValue2" 
    placeholder="99-99?99"
    mask="99-99?99">
</p-inputMask>


  • app.component.ts:

Javascript




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    maskValue1!: string;
    maskValue2!: string;
}


  • app.module.ts:

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { InputMaskModule } from "primeng/inputmask";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        InputMaskModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }


Output:

 

Reference: https://www.primefaces.org/primeng/inputmask



Last Updated : 17 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads