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.

<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">
    <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; 
    
}