Angular PrimeNG Form InputMask Необязательный компонент значений

Опубликовано: 21 Февраля, 2023

Angular PrimeNG — это набор компонентов пользовательского интерфейса для платформы Angular, разработанной и поддерживаемой Google. Это позволяет разработчикам разрабатывать масштабируемые и отзывчивые интерфейсы за меньшее время и, следовательно, повышает производительность. В этой статье мы увидим компонент необязательных значений Angular PrimeNG Form InputMask.

InputMask подсказывает пользователю, какое значение вводить на входе. Это улучшает взаимодействие с пользователем в нашем приложении. Часть ввода можно сделать необязательным с помощью '?' символ. Значение после '?' символ будет необязательным. По умолчанию, если пользователь не заполнит маску ввода и сфокусируется за ее пределами, значение будет очищено автоматически. Это можно изменить с помощью свойства autoClear .

Свойства дополнительных значений Angular PrimeNG Form InputMask:

маска: это свойство определяет шаблон для ввода пользователем.
type: это свойство используется для определения типа ввода компонента InputMask.
autoClear: если для этого свойства установлено значение false, значение маски не будет четким при размытии ввода.

Синтаксис:

<p-inputMask 
    [(ngModel)]="maskValue" 
    mask="99-99?99">
</p-inputMask>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Пример 1. В этом примере мы устанавливаем для свойства autoClear значение false, поэтому значение InputMask не будет очищаться при размытии.

приложение.component.html:

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form InputMask Option Values
</h3>
  
<h4>autoClear set to <i>true</i></h4>
<p-inputMask 
    [(ngModel)]="maskValue1"
    [autoClear]="true"
    placeholder="999-999" 
    mask="999-999">
</p-inputMask>
  
<h4>autoClear set to <i>false</i></h4>
<p-inputMask 
    [(ngModel)]="maskValue2"
    [autoClear]="false" 
    placeholder="999-999"
    mask="999-999">
</p-inputMask>

app.component.ts:

Javascript

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:

Javascript

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

Выход:

Пример 2: В этом примере указано использование '?' чтобы сделать некоторые значения маски необязательными.

приложение.component.html:

HTML

<h1 style="color:green">GeeksforGeeks</h1>
<h3>
    Angular PrimeNG Form InputMask Option Values
</h3>
  
<h4>InputMask without <i>?</i> symbol</h4>
<p-inputMask 
    [(ngModel)]="maskValue1"
    placeholder="99-9999" 
    mask="99-9999">
</p-inputMask>
  
<h4>InputMask using <i>?</i> symbol</h4>
<p-inputMask 
    [(ngModel)]="maskValue2" 
    placeholder="99-99?99"
    mask="99-99?99">
</p-inputMask>

app.component.ts:

Javascript

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:

Javascript

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

Выход:

Ссылка : https://www.primefaces.org/primeng/inputmask

Technical Scripter Picked AngularJS

Angular PrimeNG Form InputMask Необязательный компонент значений

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ