Documentation” class=”ng-tns-c2-1

Import

import {KeyFilterModule} from 'primeng/keyfilter';
 

Getting Started

KeyFilter directive is applied to an input text element using pKeyFilter attribute whose value is either a built-in regular expression name or a custom one. Following input only accepts integers.

<input type="text" pKeyFilter="int">
 

Built-in Filters

Commonly used cases have their own built-in shortcuts.

• pint: Positive integers
• int: Integers
• pnum: Positive numbers
• num: Numbers
• hex: Hexadecimal
• email: Email
• alpha: Alphabetic
• alphanum: Alphanumeric

Custom Filter

A custom filter is provided by binding a regular expression, here is an example that blocks special characters including "< > * !"

<input type="text" [pKeyFilter]="noSpecial">
 

export class KeyFilterDemo {
     noSpecial: RegExp = /^[^<>*!]+$/
}
 

Validate Mode

Instead of blocking a single keypress, the alternative validation mode which is enabled with pValidateOnly property validates the whole input with a built-in Angular validator.

<form #form="ngForm"> 
    <label for="cc">Credit Card</label> 
    <input id="cc" type="text" name="cc" [(ngModel)]="cc" pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="1234-1234-1234-1234">
    <p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"></p-message>
</form>
 

Properties

Styling

This directive does not apply any styling.

Dependencies

None.

Source” class=”ng-tns-c2-1

View on GitHub

<h3>Filtering</h3>
<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="int" placeholder="Integers">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="num" placeholder="Numbers">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="money" placeholder="Money">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="hex" placeholder="Hex">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="alpha" placeholder="Alphabetic">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText pKeyFilter="alphanum" placeholder="Alphanumberic">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText [pKeyFilter]="blockSpecial" placeholder="Block # < > * !">
    </div>
    <div class="ui-g-12 ui-md-4">
        <input type="text" pInputText [pKeyFilter]="blockSpace" placeholder="Block space key">
    </div>
</div>
<h3>Validation Mode</h3>
<form #form="ngForm">
    <label for="cc" style="display:block;margin-bottom:4px">Credit Card</label>
    <input id="cc" type="text" name="cc" [(ngModel)]="cc" pInputText [pKeyFilter]="ccRegex" [pValidateOnly]="true" placeholder="1234-1234-1234-1234" style="margin-right: .5em">
    <p-message severity="error" text="Not a valid number" [@errorState]="form.dirty && !form.valid ? 'visible' : 'hidden'"></p-message>
</form>
 

export class KeyFilterDemo {
    blockSpecial: RegExp = /^[^<>*!]+$/ 
    blockSpace: RegExp = /[^\s]/; 
    ccRegex: RegExp = /[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/; 
    cc: string; 
}