AlphaGit / ng-pattern-restrict

Allowing only certain inputs based on a regex pattern, for AngularJS
http://alphagit.github.io/ng-pattern-restrict/
MIT License
47 stars 32 forks source link

Allow mask support #16

Open AlphaGit opened 9 years ago

AlphaGit commented 9 years ago

Provide the ability to create masks along with the input restriction. Something similar to https://github.com/RobinHerbots/jquery.inputmask

Yankovsky commented 9 years ago

I want to participate. Any ideas of how to implement this feature?

AlphaGit commented 9 years ago

@Yankovsky Welcome!

jQuery already has great plugins that provide this functionality, for which the source code can be found here:

Based on it, I'd ask (and investigate an answer for) the following questions:

  1. Would we need to use mask expressions, or can we detect literals in Regexes?
  2. Every time the value changes, we need to find which is our position in that regex
    1. If we're into a delimiter position, and the regex allows no more values before the delimiter, advance the cursor and include the delimiter into the string
    2. What to do if the regex allows for more values? E.g. \d{0,4}-?\d{5} and our string is currently 123| (| would be the cursor).
  3. How does the API restriction on non-type-text inputs affect us here? Should we "disguise" every input as a type=text? (This is something I was actively avoiding, in order not to affect mobile UX and play nice with other directives.)
  4. Can we show the mask beforehand, or do we need to calculate it on the fly? Since not every regex will have a fixed number of values before delimiters, can we even determine where they should be placed? (Related to 2.2.)
  5. How does #15 affect us here?