Angular component for input fields based on a configurable mask
0 people use it
Author: 589286?v=3 awerlang

AngularJS component for input fields based on a configurable mask. Compatible with AngularJS 1.3.4+. Works together with ngModelOptions introduced in AngularJS 1.3.

The problem of typing data according to some predefined mask is nothing new. Solutions already exists for this, even natively in AngularJS. Unfortunately, I didn't managed to find a solution that worked the way it should.

Then I decided to tackle on this problem and here I present you my approach. I also took it as a exercise of good design, so it was also pleasing to write. When I realized it was actually doing its job well, I decided to polish it and share. From the first prototype, it took a couple of hours more to have it working the AngularJS way. A handful more to make it actually releasable (bower, npm, git).


  • Angular native implementation compatible with 1.3.4+;
  • Validate input format, setting ngFormController's $error property as appropriate;
  • Store separators in models by default (WYSIWYG);
  • Handles source model containing separators or not;
  • Allows programmatic change of model value;
  • Automatically sets input's maxlength for you;
  • Provide filter for use on interpolation;
  • Publish common masks under a name;
  • Option to remove separator from model value;
  • Integrate seamlessly with ngModelOptions (allowInvalid, ngChange, debounce, updateOn).
comments powered by Disqus
This page was last updated over 3 years ago.