Re: [angular.js] Masking user input

[Peter Bacon Darwin]

Hi GuiBoy

Here is a working example.  http://jsfiddle.net/HJsYR/

A few changes:

• This uses a customized version of the DigitalBush mask widget, thanks to Łukasz Twarogowski (https://github.com/twarogowski).  You can see this change in the resources of the fiddle
• The directive itself is based upon the one I wrote for the Angular UI, fixed up a little for Angular V1.0 (https://github.com/angular-ui/angular-ui/blob/master/modules/directives/mask/src/mask.js).
• I added a placeholder attribute to make it look better before you put any entries into it.
• I had to change the ng-model="number" to ng-model="$parent.number", since this directive creates an isolated scope and so the original version was creating a number field inside the directive and is not affected by changing the number field on the parent scope.
• I added a keyup event handler that tries to update the model value on every key press.  Right now the parser inside the directive blocks non-valid values so the model only actually gets updated when you enter a valid masked value.  I.E. When you enter the last character that makes the value valid. You can try this version to get all non-valid values as well: http://jsfiddle.net/xf2mt/.  Actually I quite like that version!!

Pete

On 24 June 2012 18:38, Guiboy <gui...@gmail.com> wrote:

I wanted to have masked fields for my form and i found this:

http://digitalbush.com/projects/masked-input-plugin/  (that seems to be the de-facto field masking lib for jquery)  i wrote a simple directive to utilize it with angular 

and for the most part it works  http://jsfiddle.net/agamennon12345/S2nuf/  

This fiddle has two problems that i could not address 

1- i could not find a way to make it update the model on every character change, only on blur

2- if you update the model (using the button on the fiddle) the field will not appear masked (only after it receives focus) 

so if you find this useful cool, and if you can help me address this issues even better!  

One more thing i found this post https://groups.google.com/forum/?fromgroups#!searchin/angular/mask/angular/txZT_T_sYv4/uMC0rfysnccJ  

if you scroll to the end you will see a post by Marc Chung, he was pretty much trying to do the same thing, but i was not capable of making his code work.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/wdJlsEzPW4wJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[Peter Bacon Darwin]

You are probably right. We do need to watch for changes to ui-mask though

...from my mobile.

On Jun 25, 2012 1:53 PM, "Guiboy" <gui...@gmail.com> wrote:

Brilliant Pete!  just one question, why a local scope ->  scope:{uiMask: '='} instead of just using the attributes and the original scope as in element.mask(attrs.uiMask) this fiddle shows http://jsfiddle.net/guiboy/tYNhx/   

Then its not necessary to ng-bind to $parent, so i am confused to why that scope is needed.

Cheers!

On Sunday, June 24, 2012 2:38:20 PM UTC-3, Guiboy wrote:

I wanted to have masked fields for my form and i found this:

http://digitalbush.com/projects/masked-input-plugin/  (that seems to be the de-facto field masking lib for jquery)  i wrote a simple directive to utilize it with angular 

and for the most part it works  http://jsfiddle.net/agamennon12345/S2nuf/  

This fiddle has two problems that i could not address 

1- i could not find a way to make it update the model on every character change, only on blur

2- if you update the model (using the button on the fiddle) the field will not appear masked (only after it receives focus) 

so if you find this useful cool, and if you can help me address this issues even better!  

One more thing i found this post https://groups.google.com/forum/?fromgroups#!searchin/angular/mask/angular/txZT_T_sYv4/uMC0rfysnccJ  

if you scroll to the end you will see a post by Marc Chung, he was pretty much trying to do the same thing, but i was not capable of making his code work.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/Brqi1vM3k4QJ.

[Peter Bacon Darwin]

Here is a better version that tracks changes to the mask without creating an isolated scope.

http://jsfiddle.net/XdnZr/ 

You should be careful though because if another directive on the same element does isolate the scope then you will lose access to the number field.  I.E. It will be created inside the isolated scope and any updates will not appear outside the isolated scope.  To overcome this always ensure that you model fields are part of an object that is defined on a parent scope, like

myData.number, where myData is defined in a controller somewhere before this directive, rather than simply number.

Pete 

[vaibhav...@gmail.com]

Hi,

I wish to understand why we have to do event handling (keyup/blur) on the element manually for updating the model. Isn't it the job of ng-model directive to take care of this? A link function with just "element.mask(attrs.uiMasking);" statement would have been so easy.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Alex Figueiredo]

How would I change that to make it accept 'input' and 'paste' events? 

Hi GuiBoy

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[calvin...@gmail.com]

Thanks Peter!  Been trying to get ui-mask to work for days.  Was having a hell of a time until I found this.

[Peter Bacon Darwin]

I have updated the Angular UI demo page: http://angular-ui.github.com/#directives-mask

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.

To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Alan Löffler]

I was trying to use the angularui-mask directive, but none of this examples are working right now. What is the problem with them?