Angular PrimeNG Form InputMask造型组件

Angular PrimeNG是一个Angular UI组件的集合。它是一个由PrimeTek开发的开源库。它有许多现成的组件，使它成为Angular开发者在选择UI库时的首选之一。在这篇文章中，我们将看到Angular PrimeNG Form InputMask Styling Component.。

InputMask组件为用户提供了一个在输入数据时必须遵守的特定格式。这些数据可以是任何东西，如日期、电话号码、货币等。InputMask组件只有一个结构样式类，与InputText组件相同。

Angular PrimeNG Form InputMask Styling Classes：

p-inputtext。这是InputMask组件的输入元素。

有一些Form InputMask的样式，下面会介绍。

mask。此属性用于定义用户可以输入的值的类型。它可以包含
a – 阿尔法字符（默认：A-Z,a-z）。
9 – 数字字符（0-9）。
* – 字母数字字符（A-Z,a-z,0-9）。
placeholder。该属性用于为InpiutMask组件设置一个占位符。

语法:

// app.component.html
<p-inputMask 
    [(ngModel)]="..."
    placeholder="..." 
    mask="...">
</p-inputMask>

// app.component.css
:host ::ng-deep .Structural-Style-Class {
    // CSS
}

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

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG Form InputMask造型组件

Project Structure

例子1：在这个例子中，我们使用 “p-inputtext “造型类来改变输入掩码组件的边界颜色和文本颜色。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Styling Component</h3>
  
<h4>
      InputMask Styling - 
      Border and Color of 
    the InputMask
</h4>
  
<p-inputMask [(ngModel)]="maskValue" 
             placeholder="99999-99999" 
             mask="99999-99999">
</p-inputMask>

app.component.css

:host ::ng-deep .p-inputtext,
:host ::ng-deep .p-inputtext:focus:enabled,
:host ::ng-deep .p-inputtext:hover {
    color: green;
    border: 2px solid green;
    box-shadow: none;
}
  
:host ::ng-deep .p-inputtext:focus:enabled {
    box-shadow: 0 0 0 0.2rem #c9febf;
}

app.component.ts

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form InputMask造型组件

例子2：在这个例子中，当InputMask不在焦点上时，我们去掉了它的边框，当它在焦点上时，它又恢复了边框。另外，我们改变了字体大小，并将里面的文字加粗。

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG InputMask Styling Component</h3>
  
<h4>
    InputMask Styling -
    Border and Font Size
    of the InputMask
</h4>
  
<h5>Normal Inputmask</h5>
<p-inputMask [(ngModel)]="maskValue1" 
             placeholder="99999-99999" 
             mask="99999-99999">
</p-inputMask>
  
<h5>Custom Inputmask</h5>
<p-inputMask class="custom" 
             [(ngModel)]="maskValue2" 
             placeholder="99999-99999"
             mask="99999-99999">
</p-inputMask>

app.component.css

:host ::ng-deep .custom .p-inputtext {
    border: none;
    font-size: 24px;
    font-weight: bold;
    background-color: #e2e2e2;
}
  
:host ::ng-deep .custom .p-inputtext:focus:enabled {
    box-shadow: none;
    border: 2px solid red;
}

app.component.ts

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG Form InputMask造型组件