Angular, input field with a currency mask directive for money format on the fly

Question

I\'m trying to create an input mask for a EU money field using http://jquerypriceformat.com/

So far in my directive, the input shows correctly to the user with the

Answer 1

I like Dubilla's approach cause of its simplicity and elegance. I decided to add (with due credits) some features on top of it to make it quite close to real world use case.

I've using it on a github project to create some useful finance directives github.

Notable extra features:

1. It does some rigorous checking of the inputs to give a valid response.
2. It has some keyboard shortcuts to make entering large numbers quicker.
3. I show how to integrate it with bootstrap and ngmodel css updates.
4. As a bonus I outputed the form's ngmonel as JSON to help people see how the form validation works in real time

It also uses a POJO as the ngmodel:

function Money() {
    this.notional = 0;
    this.maxValue = 99999999999.9;
    this.maxValueString = "99,999,999,999.9";
    this.maxPrecision = 10;
}

you can use it with Bootstrap 3 like so:

Currency Formatting directive



    

        


            

                

                      
Required



            

            SAVE
        
        
Tips
        


            
 Entering 'k' will multiply the amount by one thousand
            
 Entering 'm' will multiply the amount by one million
            
 Entering 'b' will multiply the amount by one billion
        
    

Form debugger
               form = {{ myForm | json }}