Angular PrimeNG InputMask 组件

Angular PrimeNG 是一个开源框架，具有丰富的原生 Angular UI 组件集，可用于出色的样式，并且该框架用于非常轻松地制作响应式网站。在本文中，我们将了解如何在 angular primeNG 中使用 InputMask 组件。

InputMask 组件允许用户以某种格式输入值，包括数字、日期、货币和电话。

特性：

• type：它定义了 HTML5 中的输入类型。
• 掩码：它定义了掩码的图案。
• slotChar : 掩码的占位字符，& 默认值为下划线。
• autoClear：它定义了帮助清除模糊上不完整值的属性。
• unmask ：仅当 ngModel 将原始未屏蔽值设置为绑定值或格式化的掩码值时，才定义此属性。
• style：它定义了输入字段的内联样式。
• styleClass：它定义了输入字段的样式类。
• 占位符：用于显示输入的咨询信息。
• size：它定义了输入字段的大小。
• maxlength：允许输入字段中的最大字符数。
• tabindex：指定元素的tab顺序。
• disabled ：当出现在元素标签中时，它指定元素值不能更改。
• readonly：当出现在元素标签中时，它指定输入字段是只读的。
• name：它指定输入字段的名称。
• inputId：它是与为组件定义的标签匹配的焦点输入的标识符。
• required：如果存在，它指定在提交表单之前必须填写输入字段。
• characterPattern：它定义了字母字符的正则表达式模式。
• autoFocus：当出现在元素标签中时，输入会在加载时自动获得焦点。
• 自动完成：它定义了一个自动完成当前元素属性的字符串。
• ariaLabel：它定义了一个标记输入元素的字符串。
• ariaRequired：用于指示在提交表单之前需要用户输入元素。
• title : 它定义了标题的输入文本。

活动

• onFocus ：当输入获得焦点时调用的回调。
• onBlur：输入失去焦点时调用的回调。
• onComplete：当用户完成掩码模式时调用的回调。
• onInput：输入字段值更改时调用的回调。
• onKeydown：当输入接收到 keydown 事件时调用的回调。

创建 Angular 应用程序和模块安装：

• 第 1 步：使用以下命令创建一个 Angular 应用程序。

  ng new appname

• 第 2 步：创建项目文件夹（即 appname）后，使用以下命令移动到该文件夹。

  cd appname

• 第 3 步：在给定目录中安装 PrimeNG。

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

项目结构：它将如下所示。



示例 1：这是展示如何使用 InputMask 组件的基本示例 







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 {}

输出：



示例 2：在这个示例中，我们将了解如何在 InputMask 组件中使用 disabled 属性

app.component.html

GeeksforGeeks
PrimeNG InputMask component

  

    
  

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 {}

输出：



参考： https://primefaces.org/primeng/showcase/#/inputmask