Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.4 The Mask Utility

In this lesson, we'll look at angular UI's mask utility. The mask utility is a really neat utility that will be great for working with forms. And I'll show you how this works. So I've created a mask copy of our template folder. And let's go ahead and open up our index.html file. Now imagine we're building a form, right? And some elements in the form, like, for example, a credit card, need to be given in a certain way, not only do they have a certain format that, that data is usually accepted in, for example a credit card number is a 16 digit number. but also, they could be formatted so that they are. Easier for the user to think about or look at. For example a credit card number should divided into groups of four. A phone number maybe has the area code in parenthesis and a hyphen between the first three digits of the actual number and the last four digits. These are the kinds of things you can do with the mask utility. So for example, let's create a paragraph here, and let's have an input, and let's do ng.model, and we'll call this val1. And then the way to actually apply a mask to this input element is to do ui.mask, and then we actually pass it mask. We're gonna put these masks. In our app.js file, so I'm gonna go ahead and just say {{mask1}} so that our value will be interpolated here. And then underneath this, let's just go ahead and create a second paragraph. And in here, we'll just show you. Whatever val1 is. So let's go ahead and open app.js. First thing we need to do is ask for ui.mask dependency. And then we need to create our mask1. So let's go ahead and say $scope.mask1. Now a mask is just a simple string and there are three rules that we can follow. Anytime we want a number in our mask we use the number 9. Anytime we want a letter, we use a capital letter A and anytime we want to accept any character, we use an asterisk. The mask for a credit card might look like 9999 9999 9999 9999. All right? Let's do another one here. Let's do $scope.mask1. For a phone number, might look like (999) 999-999. Now unfortunately, these are all just numerical, so let's do $scope.mask3 equals and let's just say, A9A9- A9A9. Let's actually instead of having hyphen there let's just add asterisk, asterisk, asterisk, and now we have three different mask we can try out, and actually now that we have three lets come back and copy these paragraphs that we have here. We'll, copy and paste them twice, and then we can change this to val2 and {{mask2} and {{val2}} and val3 {{mask3}} and {{val3}}. Okay. And that should be all we need to do. So now if we come to the browser you can see that right off the bat our input elements here are actually showing some neat behavior. Any of the punctuation that we added, for example the spaces or the hyphens or the parenthesis are actually showing up almost as placeholder text and we also have. Underscores if you will, or underlines where our values will be. So if I click in the first one here, I can start typing. And if I start typing letters, what you can't tell right now is I am typing letters but nothing is showing up, but as soon as I hit a number, now we can actually write. As I write numbers, you can see that they're being filled in and when I come to the spaces, they're just skipped over. Once our mask is completely matched with the string that we type in, you can see the value is then set. To the model, val1 in this case, and it appears underneath it. Okay, let's try the second one here. Once again letters do nothing but I can actually write a phone number so I can, and as you can see, there we go. Now the thing to notice about both of these so for, is that even though our mask shows the value properly formatted in the text area; for example with this basis for the credit card number, or with the parentheses, space and hyphen for the telephone number, the value that is actually set for the model. Is just those digits that the user typed in. The formatting that we've done is not included, which is really what you want. You want the raw value stored in the database, but the pretty value, if you will, displayed to the user. All right, let's do the last one here. I am typing a letter, and only one letter will be accepted, so now we go to numbers. One number, go back to letters. Numbers, oh, notice I can type three extra numbers here, which are our asterisks. But they don't have to be numbers, they could also be letters. What they cannot be though, is special characters. Right now I'm trying to type an exclamation mark, an at sign, parenthesis, hyphen, plus, none of those are accepted. So the asterisks there only accepts alphanumeric characters. Let's add a few more characters there. Back to our number, a letter, a number, a letter, a number, just like we set in our pattern. So the mask utility is very simple, but it can be very helpful in making your forms a lot more user friendly.

Back to the top