Formatting text input with angular

Question

I want to format the view of a text input for a Dutch zipcode, which always starts with 4 digits, and ends with 2 letters. I.e: 1234 AA. I want a text input to automatically format the data to this format.

I tried this with ui.mask, which works if you don't put in a custom-placeholder. I don't really like the placeholder ____ __, so I set up 1234 AA.

http://plnkr.co/edit/5zC2pAM4UBNC046jwQDy

This works, but it could be possible that my zipcode starts with a 1. When I try to enter my example-zipcode 1122 AB, I can't.

I also messed around with formatters and parsers, but I couldn't get it to work. The value in the model should be 1234AA, without a space.

Answer 1

It seems that setting a placeholder in the input messes with the masking.

What you can do is create a directive to add the placeholder after ui-mask processes that there is no placeholder and uses the ui-mask's value instead:

Create this directive:

.directive("myPlaceholder",function($timeout){
    return{
        link: function(scope, element, attrs){          
          $timeout(function() {
            element.removeAttr('placeholder');
            element.attr('placeholder', attrs.myPlaceholder);
          });         

        }
    }
})

And set it into your input instead of the actual placeholder:

<input type="text" ui-mask="9999 AA" ng-model="x" my-placeholder="1234 AA" />

Check it here:

http://plnkr.co/edit/Hxj63BXDmldEpGJry8F9?p=preview