极客教程Angular PrimeNG Form InputMask Properties组件
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站，非常方便。在这篇文章中，我们将知道如何在Angular ngx bootstrap中使用日历组件。
InputMask组件：该组件用于输入某种格式的输入，如数字、日期、货币和电话。
属性:
- type。此属性用于定义HTML5输入类型。
- mask。此属性用于定义掩码模式。
- slotChar:此属性用于定义掩码中的占位符，默认为下划线。
- autoClear：该属性用于在模糊时清除不完整的值。
- unmask。此属性用于定义ngModel是否将未屏蔽的原始值设置为绑定值或格式化的屏蔽值。
- style。此属性用于定义输入字段的内联样式。
- styleClass。此属性用于定义输入字段的风格类。
- placeholder。此属性用于定义要在输入时显示的咨询信息。
- size。此属性用于定义输入字段的大小。
- maxlength。此属性用于定义输入字段中允许的最大字符数。
- tabindex。该属性用于指定元素的标签顺序。
- disabled:此属性用于指定元素的值不能被改变。
- readonly:此属性用于指定一个输入字段是只读的。
- name: 此属性用于定义输入字段的名称。
- inputId。该属性用于定义焦点输入的标识符，以匹配为该组件定义的标签。
- required。此属性用于指定在提交表单前必须填写一个输入字段。
- characterPattern:此属性用于定义阿尔法字符的重码模式。
- autoFocus:该属性用于定义输入在加载时自动获得焦点。
- showClear：此属性用于清除图标，显示清除值。
- autocomplete:此属性用于定义一个字符串，对当前元素的属性进行自动补全。
- ariaLabel。此属性用于定义一个字符串，用于标记输入元素。
- ariaRequired。此属性用于表明在提交表单之前，需要用户在一个元素上进行输入。
- header。此属性用于定义输入文本的标题文本。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
Project Structure:
示例1：在下面的代码中，我们将使用上述属性来演示表单InputMask属性组件的使用。
app.component.html
<div style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<h4>
Angular PrimeNG Form InputMask
Properties Component
</h4>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-6 p-lg-4">
<span>GFG</span>
<p-inputMask mask="99-999999"
[(ngModel)]="val1"
placeholder="+91-">
</p-inputMask>
</div>
</div>
</div>
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
val1: string;
val2: string;
val3: string;
val4: string;
val5: string;
val6: string;
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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属性组件的使用。
app.component.html
<div style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>A computer science portal for geeks</h3>
<h4>
Angular PrimeNG Form InputMask
Properties Component
</h4>
<div class="p-col-12 p-md-6 p-lg-4">
<span>Date</span>
<p-inputMask mask="99/99/9999"
[(ngModel)]="val3"
placeholder="mm/dd/yyyy"
slotChar="mm/dd/yyyy">
</p-inputMask>
</div>
</div>
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
val1: string;
val2: string;
val3: string;
val4: string;
val5: string;
val6: string;
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 { }
输出:
