Vue.js – From The Ground Up

Vue.js Tutorial From Scratch – e16 – Auto Format Input Fields

welcome as we continue to explore some real-world uses for view up next I want to do a very common form thing which is formatted inputs check this out so this

would be a typical phone number formatting for a US number so as I start to type we'll say 1 2 3 notice how our application is formatting the number for us the only thing that I'm doing

actually inputting just two digits and then it nicely formats it for the user now this form is actually quite cool if I started to type letters I'm trying to type some letters right now no it's hard

to see but it's not working only digits can be typed in furthermore if I continue to try to type more digits nope it doesn't work it locks us into this very particular format now another

very cool thing about this form and the way that we're going to do it is that we can actually create the template right from our actual component so if I wanted to change this template to be say three

digits and then a period and then three more digits and then four digits another common way to show a US number when I hit refresh now we have the new format working for us right away how awesome is

that so it's super dynamic it's a super cool approach using regular expressions so stick around we've got a ton of cool stuff to cover in this lesson and if you stick with it I promise you you're gonna

learn some really cool tricks that you can use with view JavaScript and regular expressions stick around [Music] all right so let's jump right to it so

I'm going to create a new component and let's go ahead and call it just telephone dot view we will end up using this as a reusable component but just for the very primary example let's go

ahead and just do a telephone example so let's add our template tag as well as the script tag alright so in here what do we need to do in terms of template well again we are using tailwind so

let's go ahead and make a nice big form that we can work with so I'll add a class here just to add some additional margin so let's add some margin top of six and then inside this div we'll have

our actual input field so for input field it's going to be a text field and for placeholder let's go ahead and have the initial format that we're going to be working with so let's just say that

we have three digits inside parentheses followed by space then three more digits and then a dash and then four digits just a typical phone number makeup finally let's add some classes here

these are all going to be just based around that we want this to look nice and large so let's start with a width of 56 and let's give it a text of 2xl nice and big font let's give it a BG gray of

300 let's give it padding three all the way around nice big rounded corners with rounded LG and then I'm focus let's go ahead and remove the outline so we'll say focus

colon outline:none all right so with that being said let me go ahead and reformat this and finally let's go ahead and add our first data property and this is going to be the V model for this

actual input field so we'll have a data it's gonna be a function that will return an object and inside of this object we're going to have number and initially that'll be an empty string so

let's go ahead and add that V model now so V model for number just set up here nothing crazy let me go ahead and also add a new view so we can actually preview this and we'll just call it

forms that view we'll have our template tag as well as the script tag and here we know we need that new component we just created so let's go ahead an

import telephone from will have to go up one directory into components and then grab telephone dot view alright so then in our list of components let's go ahead and use telephone now for template we'll

simply do a div and inside of here we'll have our actual telephone component let's add this to our router as a new route here say all right so this is gonna be slash forms for name will say

form as well and the component is going to be forms component in which we don't have yet so let's go ahead and add that in and we'll say that it's called the forms and we'll import that from forms

alright fair enough visit the browser and there we go all setup stuff that we already knew now we start to type into this of course we want to go ahead and restrict all of

this right now everything is acceptable so we'll take it one step at a time the first thing we need to do is go ahead and limit what is actually being put in right if this is a telephone number then

we only want digits so what we need to do is go ahead and watch this number property that we added and whenever any other character other than zero through nine is input it we're gonna go ahead

and delete it we're gonna ignore that all together so to do that let's add a watch property for number so whenever number gets updated this function here will actually be called and for this

let's go ahead and set this dot number equal to something else so we're gonna set this dot number to this number dot replace all right so inside of here we're gonna need a regular expression so

we know the following we know we want everything from zero to nine however we need to negate this because we want to replace everything that is not zero through nine with something else so to

negate we can use this symbol that is going to be shift and six in most keyboards and we're gonna do that globally now we're going to replace that with just an empty string so any

character that is not zero through nine replace it with an empty character let's check that out in browser so if we type ABC I'm typing I can't type anything in

there but as soon as I type numbers it works try to type any letters at all except numbers or including spaces dashes and nothing will work but zero through nine all right so that is step

one so this is a phone number so of course we want to restrict that so to keep going we need to do another replace so now that we have just the digits now we need to constrain this to the format

that we are looking for and just to refresh your memory this is the format that we are looking for so let's go ahead and do another replace call and we can tag that right

after that ins just say replace and then of course we're gonna need a new regular expression to put here and then we're gonna need this replace section what are we going to replace it with so to start

let's do it step by step I'm actually going to copy this and we're gonna convert this one thing at a time so I'll paste this in to replace but of course this is not real regular expression we

need to turn this into an actual regular expression so the first thing that I see here is three distinct groups we have one group of three another group of three followed by a group of four so in

regular expression we're going to need to wrap this in parentheses so let's go ahead and grab this and wrap it in parenthesis now this one is already wrapped in parenthesis so we are good to

go now let's go ahead and eliminate everything that is extra so we're gonna have three digits followed by three digits followed by four digits and we're gonna have three capturing groups that's

what these parentheses are so we're gonna be able to reference these capture groups in our replacement which is pretty cool the other thing is we need this to start with this three digits we

want the very first character to be the very first thing matched so to do that we use the same character again again this is shift six okay so then how do we grab three digits in a row we can escape

a digit and then in curly brackets we can specify how many so we'll say three and then we'll do the same exact thing on this one so we'll say alright so give me three digits it's basically what that

means and then we're gonna go ahead and do the same thing again but this time of course we're looking at four digits so this is gonna be the regular expression that we're gonna be putting

everything together in remember these are gonna be digits only because we've already ran this through a replacement that only gives us digits so we'll go ahead and add the G flag to that and

then what are we going to replace this with now you may not know this but you can actually pass in a string right afterwards so we can say the following we know it's going to be a parenthesis

followed by space and then we're going to have three digits and then a number so to grab the first capture group we're gonna say dollar sign one then two grab the second capture group we're going to

say dollar sign to and then we're gonna have a dash and then we're gonna say dollar sign three all right let's see this in action let's refresh and I'm going to say one two three four five six

seven eight nine zero and there we go now everything got matched so you saw how at the end of us finishing typing everything bumped into place so nothing is happening there and as soon as we hit

that last character it gets perfectly formatted so now this is one way of doing it however if you wanted to kind of do it as you are typing what you can do is

make the second and third group optional even the first group can be made optional so we can add a question mark right after each of these groups and now when we hit refresh I'll type in 1

notice how we already kind of have the formatting here 2 3 and as soon as one group is matched it gets bumped into place so we'll say 1 2 3 again notice how that got bumped in front of our dash

and then we'll say 1 2 3 4 so just like that this is working so this is a basic example of how to get this input field to format again if you want it to only match at the very end in that case you

can go ahead and not have these question marks now I do like to give the user a little bit of feedback almost like yes those first three digits are good to go give me the next three yep those are

good and then give me the final four and we are good to go so that's a good way of doing it again it's a preference thing you can do it however you'd like

the next thing I want to fix is the following so yes we have the right number but we can keep typing and we can add as many numbers as we want after this but truthfully that's probably not

what you want what you really want is to limit the number of digits that you are given to the number of things that you actually have so to do that we're gonna have to do a little bit of refactoring

so let's start with this right here this is obviously going to be customizable so to make this customizable we need to pass that in as a prop so let's add our props right here we'll say props it's

gonna be an array and then the first prop is gonna be template so now in our form in our telephone we can say alright the template is gonna be equal to and then we can copy this template right

here copy paste it right into there and now we can bind placeholder into template that way it actually uses the prop instead of being hard-coded in and this is how we're going to start to

replace one at a time so now that we have our template we know the length of our template so we can say okay well at the very end if there's anything else we could use sub STR and we can say okay I

only want you to give me from character in position zero to this dot template dot length so I don't want you to be any longer than our actual template which would make sense and this will do the

trick for us let me hit refresh I'll say one two three four five six seven eight nine zero and then I can't type anymore that's it now I am locked in but now if we changed our template we went ahead

and removed that space it's gonna act a little funky but you notice that the placeholder did get updated but now and it won't let me add anything else now the reason for this is of course because

our placeholder actually is not dynamic just yet we actually hard-coded in this regular expression but what I really want to do is go ahead and make this dynamic so we can change the formatting

in our template and we can create a dynamic regular expression so it's gonna take a little bit of work but if you stick with it I promise you it's gonna be a cool learning

experience in regular expressions so let's go ahead and get started with that section of it so when my component is mounted we're gonna have to do some extra work here to set everything up

because remember our template is coming from the outside world so as soon as we are mounted we are ready to go ahead and tackle and digest this template and make it work with our

regular expressions that we have down here again these are hard-coded right now but they're going to be dynamic we're going to generate them automatically on the fly when the

component is mounted so to do that let's do the following the first thing we're going to need is we're going to need a format if you notice down here we'll set that to an empty string but if you

notice down here we have a regular expression but we also have a format so we need to grab away to generate this format right here using our placeholder which is this our template to do that

let's do the following so we're gonna grab this dot format which is this new data property that I added up here and this will be equal to this dot template remember this template is this template

right here being passed in as a prop so this dot template dot replace will use the same exact notation and another way that you can use replaces that you can actually pass back a callback function

which is pretty cool so as a first argument we're still going to need our regular expression and what we're going to be looking for is capital exes right as we know our template here is based

around all of these capital X's so we're going to find any excess one or more so we do that with a plus sign and we'll say go ahead and do that globally and then we can go ahead and do shorthand

syntax so whenever you find any exes I want you to replace them with something and essentially I want you to replace them with dollar sign one for the first one that finds dollar sign two for the

second one that it finds and dollar sign three for the third one that it will find so let's go ahead and set an X right here on say let's x equals one that way we know that the first one will

match the first one right so all we need to do is give it a dollar sign plus what the value of x is but then of course at the end of this we need to go ahead and increment X that way the next time is

dollar sign too so let's take it one step at a time to do that we can say the following okay give me a dollar sign and then go ahead and give me X and then you could do plus plus to increment so with

that this should be working let's go and check it out in the browser I'll hit refresh let me open up my dev tools we're going to app forms telephone and if we look down here at format check

that out so we do have the correct format again the reason for this is just that we are counting with X if I take off the plus plus check out what happens now if I look at telephone we look at

format we get dollar sign one dollar sign one dollar sign one that's not what we want we want three separate capture groups so we'll say X plus plus we'll hit refresh one more time and sure

enough we get one two and three okay so now we don't need this anymore to be hard-coded we can simply say this dot format okay so now comes kind of the grueling section it's this right here

this regular expression making this dynamic is a little bit tricky I'll explain my way through it but it's going to take a combination of knowing how many XS they are because if you remember

right here this 3 comes from the fact that there are three X's right here then the following one this one right here of course pertains to these three X's in a row and finally this fourth one with the

number four pertains to these four X's in a row so we're going to use a combination of replacing and matching to make this work so let's go ahead and add a new data property here which I will

call rejects and rejects of course will be our actual regular expression so let's take our template we always need to start with our template let's go ahead and try to match some stuff with

our template so what are we looking for with the template well we're looking for this we're looking for any number of X's one or more so we'll grab that regular expression and bring that so when you

find one of those I want you to invoke the following function now for each will receive the character meaning the actual character that were at right now plus the key both are

important we're gonna need both the first thing I want to do is show you what each of these is actually passing back to me so let's do a console dot log for char and let's check that out in the

browser I'll open up the console hit refresh and notice that we get two versions of X X X and then one version of four X's in a row which makes sense okay so how about this if we do char dot

length I bet you now we'll get threes and fours so we have the necessary numbers and that is step one chart that length is gonna give us the actual length that we need but further is more

than that we're going to need a key I'll go ahead and comment this line out just to keep that there and let's do console dialog and give me the key I want to show you what the key actually

is we get 0 1 & 2 this is a zero based index so I'll go ahead and comment this out so this is the data that we have to work with we are ready to build up our actual regular expression so we'll say

the following this that rejects and then instead of just equals let's do plus equals that way we incrementally add each one of these sections so we can say the following we know we're going to

need a capture group right remember we are simply building up this section right here so we know we're going to need a capture group followed by a digit so this right here and then we're going

to need a set of curly brackets and inside of this we need this char dot length so to do that let's go ahead and split this up into two separate strings and then in the middle we'll do char dot

length all right so let me console this that rejects so that we see what we built up and there we go so we see it incrementally adds a little bit at a time I will actually copy this let me

put it kind of side-by-side here as best as I can to show you how close we are to actually creating this on the fly so the first thing we see here of course is we are

missing the escape so we need to actually double escape that let's try that again and here is our new one I'll copy it let's paste it right here again ok so

much closer so it looks like we're missing the question mark so let's go ahead and add a question mark right here hit refresh there we go I'll copy this new generated

regular expression paste that in and there we go character for character it is exactly the same with the exception of this and we definitely need that because remember

this is what let's regular expression know that this is the beginning of the string so to do that instead of setting this as an empty string let's go ahead and set it to this and then whenever

this runs because we're using the plus equals this will get added at the very beginning so let's go ahead and hit save on that and sure enough now when we pull up our final one I'll pull it up right

here and paste exactly the same great so now this means that we can replace I'll copy this that rejects that means that we can replace this with this that rejects but you can't just put a regular

expression as a string you actually need to wrap it any special JavaScript class that is actually provided for us and it looks something like this we'll say create a new regular expression and as a

first argument we're going to pass this that rejects and then as a second argument we can pass in any additional options such as this global option so we'll go ahead and add G in single

quotes Plus this format and let's go ahead and give that a shot I'll hit refresh and let's say 1 2 3 4 5 6 7 8 9 0 and we are working but they biggest difference now is that this is dynamic

check this out I'm going to change my template to something else what if I wanted it to be something like C – and then maybe 4 digits imagine that instead of this being a telephone ignore that

this is a telephone this is maybe a special student ID or something like that I'll go ahead and hit refresh on our browser and now we're gonna say 1 2 3 4 and check that out that also got

formatted even though we didn't write a regular expression all right let's try another one let's say we changed our phone number and now it's gonna be three digits that three more digits dot four

digits how about that would that work I'll hit refresh one two three four five six one two three four and there we go you see how that gets formatted this is a very cool approach for creating

dynamic regular expressions that can be reused in nice view components so I hope you've enjoyed this lesson I know this was deep in terms of regular expressions and regular expressions are extremely

extremely powerful if you can dominate regular expressions I promise you anything that you need to manipulate in terms of string is possible regular expressions can do just about anything

you could ever imagine so with that don't forget to subscribe and share all of the coders tape videos that way we continue to grow the channel and continue to spread awesome web

development knowledge thanks for watching

A cool way to spice up your forms is to add some auto format to your input fields. Allowing your users to get automatic feedback on things like phone numbers that need to follow a particular template. In this lesson, we write a phone auto format component, from scratch.

For the best experience, follow along in our interactive school at https://www.coderstape.com

Resources
Vue.js Documentation
https://vuejs.org/v2/guide/

Download VSCode
https://code.visualstudio.com/

DigitalOcean Referral
https://m.do.co/c/7dce5364ef4d

Hit us up on Twitter with any questions or comments @codertape (https://twitter.com/CodersTape)

About This Course

Modern applications require a robust Javascript framework. In this series, we are exploring Vue.js from scratch, covering all topics of writing Javascript code that is maintainable, performant and best of all powerful.