Follow these instructions to create a directive for a masked input field:
-
Create a file named formMaskInputDirective.js in the src/directives folder, and a file named tokens.js in the same folder.
- In the tokens.js file, we will add our mask base tokens. Those tokens will be used to identify the kind of value our input will accept:
export default {
"#": { pattern: /[\x2A\d]/ },
0: { pattern: /\d/ },
9: { pattern: /\d/ },
X: { pattern: /[0-9a-zA-Z]/ },
S: { pattern: /[a-zA-Z]/ },
A: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase() },
a: { pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase() },
"!": { escape: true }
};
- We import the token from token.js and create our functions:
import tokens from './tokens'; function maskerValue() { // Code will be developed in this recipe } function eventDispatcher() { // Code will be developed in this recipe } function maskDirective() { // Code will be developed...