Mask Directive Specification

igxMask Directive Specification

Objectives

IgxMask directive should provide means for controlling user input and formatting the visible value based on a configurable mask rules.

2. User Stories

Developer

As a developer I want to be able to apply a mask on an input field so that the user can only type a predetermined pattern.

<input type="text" igxInput [igxMask]="myMask"/>

The following built-in mask rules should be supported:

• 0: requires a digit (0-9).
• 9: requires a digit (0-9).
• #: requires a digit (0-9), plus (+), or minus (-) sign.
• L: requires a letter (a-Z).
• ?: Requires a letter (a-Z).
• A: requires an alphanumeric (0-9, a-Z).
• a: requires an alphanumeric (0-9, a-Z).
• &: any keyboard character.
• C: any keyboard character.

Static symbols (literals) in the mask pattern should also be supported.

As a developer I want to be able specify the character used for the unfilled parts of the mask (prompt char).

As a developer I want to be able to control the way the masked value is displayed (upon exiting edit mode).

End user

The 'masked' value is formatted when the user interacts with the component by pasting, deleting or typing in the input field.

3. Functionality

End User Experience

User input is masked.

Developer Experience

Use the directive on an input element.

<input type="text" igxInput [value]="1234567890" [igxMask]="'(000) 0000-000'"/>

API

The following inputs are exposed:

• mask – a string representing the current mask to be applied;
• promptChar – a placeholder character representing a fillable spot in the mask (default is underscore);
• pipe – a custom pipe providing the opportunity to modify the displayed value;