Angular PrimeNG InputMask组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular primeNG中使用InputMask组件。

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

属性:

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

事件：

onFocus : 当输入收到焦点时调用的回调。
onBlur: 当输入失去焦点时调用的回调。
onComplete。当用户完成掩码模式时调用的回调。
onInput。当输入字段的值被改变时调用的回调。
onKeydown。回调，当输入端收到一个按键事件时，回调将被调用。

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

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

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

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

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

项目结构。它将看起来像以下。

Angular PrimeNG InputMask组件

例子1：这是一个基本的例子，说明如何使用InputMask组件。

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

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

输出:

Angular PrimeNG InputMask组件

例2：在这个例子中，我们将知道如何在InputMask组件中使用disabled属性。

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

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

输出:

Angular PrimeNG InputMask组件