Componente de máscara de entrada angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente InputMask en angular primeNG.

El componente InputMask le permite al usuario ingresar un valor en un cierto formato que incluye numérico, fecha, moneda y teléfono.

Propiedades:

• type: Define un tipo de entrada en HTML5. 
• máscara: Define el patrón de la máscara.
• slotChar : es el carácter de marcador de posición de una máscara, y el valor predeterminado es un guión bajo.
• autoClear: Define la propiedad para ayudar a borrar el valor incompleto en el desenfoque.
• desenmascarar: esta propiedad se define solo si ngModel establece el valor sin enmascarar sin procesar en el valor enlazado o el valor de la máscara formateada.
• estilo: Define el estilo en línea del campo de entrada.
• styleClass: Define la clase de estilo del campo de entrada.
• marcador de posición: se utiliza para mostrar información de asesoramiento sobre la entrada.
• tamaño: Define el tamaño del campo de entrada.
• maxlength: Permite un número máximo de caracteres en el campo de entrada.
• tabindex: Especifica el orden de tabulación del elemento.
• disabled : cuando está presente en la etiqueta del elemento, especifica que el valor del elemento no se puede modificar.
• readonly: cuando está presente en la etiqueta del elemento, especifica que un campo de entrada es de solo lectura.
• nombre: Especifica el nombre del campo de entrada.
• inputId: es un identificador de la entrada de enfoque que coincide con una etiqueta definida para el componente.
• requerido: cuando está presente, especifica que se debe completar un campo de entrada antes de enviar el formulario.
• characterPattern: Define el patrón Regex para caracteres alfabéticos.
• autoFocus: cuando está presente en la etiqueta del elemento, la entrada se enfoca automáticamente en la carga.
• autocompletar: Define una string que autocompleta un atributo del elemento actual.
• ariaLabel: Define una string que etiqueta el elemento de entrada.
• ariaRequired: se utiliza para indicar que se requiere la entrada del usuario en un elemento antes de que se pueda enviar un formulario.
• title : Define un texto de entrada del título.

Eventos

• onFocus : devolución de llamada para invocar cuando la entrada recibe el foco.
• onBlur: devolución de llamada para invocar cuando la entrada pierde el foco.
• onComplete: Devolución de llamada para invocar cuando el usuario completa el patrón de máscara.
• onInput: devolución de llamada para invocar cuando se modifica el valor del campo de entrada.
• onKeydown: devolución de llamada para invocar cuando la entrada recibe un evento keydown.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : Se verá como lo siguiente.



Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente InputMask 

aplicación.componente.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>

aplicación.módulo.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 {}

Producción:



Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad disabled en el componente InputMask 

aplicación.componente.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>

aplicación.módulo.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 {}

Producción:



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