Conditional Placeholders in Angular UI Masking

Standard

When we want to take a credit card or a phone number (or any other input that requires a specific format), we can present a clean UI that tells our users that they are giving us clean input.

We’ll need to ensure we include the mask.js library in our HTML

<script type=“text/javascript” src=“app/bower_components/angular-ui-utils/modules/mask/mask.js”></script>

And set the ui-mask as a dependency for our app:

angular.module(‘myApp’, [‘ui.mask’])

 

<input type="text" name="txtAccountNumber" numbers-only 
ui-mask="{{
bankName == 'Bank' ? '999999' :
(bankName == 'Bank2' ? '99-9999999-99' :
(bankName == 'Bank3' ? '9999999999' :
(bankName == 'Bank4' ? '9999-99999-999-999999' : '' ) ) )}}">
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s