Input - Mask - 《PrimeNG Document》 - 书栈网

Documentation
Source

InputMaskInputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.

Documentation

Import


import {InputMaskModule} from 'primeng/inputmask';

Getting Started

Component is defined using p-inputMask element with a mask and two-way value binding is enabled with standard ngModel directive.


<p-inputMask [(ngModel)]="val" mask="99-9999"></p-inputMask>

Mask

Mask format can be a combination of the the following built-in definitions.

a - Alpha character (defaut: A-Z,a-z)
9 - Numeric character (0-9)
- - Alpha numberic character (A-Z,a-z,0-9)


<p-inputMask [(ngModel)]="val" mask="a*-999-a999"></p-inputMask>

You can also define your own regex pattern for alpha character


<p-inputMask [(ngModel)]="val" mask="99-aa" characterPattern="[А-Яа-я]"></p-inputMask>

SlotChar

Underscore is the default placeholder for a mask and this can be customized using slotChart option.


<p-inputMask [(ngModel)]="val" mask="99-9999" slotChar=" "></p-inputMask>

Optional Values

If the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, certain part of a mask can be made optional by using ? symbol where anything after the question mark becomes optional.

Model Driven Forms

InputMask can be used in a model driven form as well.


<p-inputMask formControlName="username" mask="(999) 999-9999? x99999"></p-inputMask>

Properties

Name	Type	Default	Description
type	string	text	HTML5 input type
mask	string	null	Mask pattern.
slotChar	string	_	Placeholder character in mask, default is underscore.
autoClear	boolean	true	Clears the incomplete value on blur.
unmask	boolean	false	Defines if ngModel sets the raw unmasked value to bound value or the formatted mask value.
style	string	null	Inline style of the input field.
styleClass	string	null	Style class of the input field.
placeholder	string	null	Advisory information to display on input.
size	number	null	Size of the input field.
maxlength	number	null	Maximum number of character allows in the input field.
tabindex	number	null	Specifies tab order of the element.
disabled	boolean	false	When present, it specifies that the element value cannot be altered.
readonly	boolean	false	When present, it specifies that an input field is read-only.
name	string	null	Name of the input field.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
characterPattern	string	[A-Za-z]	Regex pattern for alpha characters
autoFocus	boolean	false	When present, the input gets a focus automatically on load.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.
ariaLabel	string	null	Used to define a string that labels the current element.
ariaRequired	boolean	false	Used to indicate that user input is required on an element before a form can be submitted.

Events

Name	Parameters	Description
onFocus	event: Browser event	Callback to invoke when input receives focus.
onBlur	event: Browser event	Callback to invoke when input loses focus.
onComplete	-	Callback to invoke on when user completes the mask pattern.
onInput	-	Callback to invoke on when the input field value is altered.

Methods

Name	Parameters	Description
focus	-	Applies focus to the input.

Styling

Styling is same as inputtext component, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub


<div class="ui-g ui-fluid">
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Basic</span>
        <p-inputMask mask="99-999999" [(ngModel)]="val1" placeholder="99-999999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>SSN</span>
        <p-inputMask mask="999-99-9999" [(ngModel)]="val2" placeholder="999-99-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Date</span>
        <p-inputMask mask="99/99/9999" [(ngModel)]="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone</span>
        <p-inputMask mask="(999) 999-9999" [(ngModel)]="val4" placeholder="(999) 999-9999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Phone Ext</span>
        <p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="val5" placeholder="(999) 999-9999? x99999"></p-inputMask>
    </div>
    <div class="ui-g-12 ui-md-6 ui-lg-4">
        <span>Serial Number</span>
        <p-inputMask mask="a*-999-a999" [(ngModel)]="val6" placeholder="a*-999-a999"></p-inputMask>
    </div>
</div>


export class InputMaskDemo {
    val1: string;
    val2: string;
    val3: string;
    val4: string;
    val5: string;
    val6: string;
}