Custom Angular Input Mask
Solution 1
i guess you have to use patterns
The following example, taken from this article on CSS-tricks, by Chris Coyier but created by Estelle Weyl, shows how to handle a Canadian zip code with the A1A 1A1 form:
<div> <label for="czc">Canadian Zip Code</label> <input id="czc" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" data-charset="_X_ X_X" id="zipca" type="text" name="zipcodeca" title="6-character alphanumeric zip code in the format of A1A 1A1" /> </div>
in your case you should only change the pattern regular expression.
Solution 2
"angular2-text-mask" NPM library perfectly works for me.
https://www.npmjs.com/package/angular2-text-mask Let me know if you need any help.
Thanks.
Vlad Danila
Technical University of Cluj-Napoca Computer Science student
Updated on June 13, 2022Comments
-
Vlad Danila almost 2 years
I do have an input field which is populated with JSON object data.
dimension: { length: 10.00, width: 20.00, height: 30.00, }
The input looks like this:
<input matInput [placeholder]="Dimension (LxHxW)" formControlName="dimensions" name="dimensions" mask="00.0x00.0x00.0" [specialCharacters]="['x', '.']" [clearIfNotMatch]="true" [showMaskTyped]="true" />
where dimensions is built in typescript code as:
let dimensions = null; if (dimensionObject) { dimensions = '' + dimensionObject.length + 'x' + dimensionObject.width + 'x' + dimensionObject.height; }
The goal is to map correctly the data on the mask and obtain the length, width and height concatenated with an x in between-> obtain a flexible mask.
The problem appears when dimensions values are of different length:
e.g. if dimension is 2.3 x 12.3 x 42.2 instead of 2.3 x 12.3 x 42.2 it will show 23.1 x 23.4 x 22. ( x shifted).
Any solutions you guys can spot?