Simple input mask which works with angularJS

Input masking fields in your forms is a good way to ensure users enter the data correctly, in the right format along with the added bonus of input being locked down to certain characters. Fields such as phone numbers, dates, social security numbers along with other fields which require data in a certain format can benefit from using an input mask, as the visual prompt helps ensure users are entering data correctly (and it provides another level of validation).

The jquery.inputmask plugin is a simple solution which will slot nicely into any project and has the added bonus of not conflicting with angularJS. The input mask only becomes visible once the user hovers over the form element, or places the cursor inside it:

You can also use the HTML 5 placeholder text with this library and that text will show whenever the user is not hovering or active in the form field. It also works with date picker fields (as long as the date picker element and input mask have the same format).


In the example above there are two input masks defined, the first one accepts 3 sets of numeric characters and the second takes 3 numeric characters followed by an alpha character.

angularJS check box inside a repeater

In the case where you have a table of data populated via an angularJS ng-repeat where a check box is present for each row of data, the following method will populate an array of data values (for the checked items).


Whenever the user checks an item, the member number is added to the array and whenever the user un-checks an item it is removed. This could also be modified to initialize the checked values from the data as well