Let’s Build A Form Around It - Sani Yusuf

[Applause] Wow 1,500 people good-morning ng-conf how's everybody doing today that's what I like energy energy energy energy Naru so yeah thank you for the introduction today you'll the form around it so I'm going to deconstruct a bit about angular reactive forms so let's get started let's get the boring stuff out of the way don't mind my little dating profile picture my name is sunny Yousef I'm a Google developer expert that picture was taken out of conference actually so yeah groov developer expert on the web so angular stuff and I do a lot of ionic stuff as well I'm also an angular boot camp instructor so I go around parts of the states and part of your teaching people angular lucky me I'm also building this great thing called UI school so you can check that out you are those who I don't know how we pulled off that domain name but yeah and avatar is the best movie of all time you cannot say anything else if you have not seen that movie you need to we cannot be friends exactly the blue people not that other thing yeah exactly all right so you can find your line at sunny Yousef if you find anyone that looks this good with that username just let me know so I can see them thank you very much let's talk about forms forms forms forms forms actually have the ability to make or break your business you never thought that was a form did you this is the most profitable form in the world you use it every day but you've never thought about it as a form have you cuz you just go you know why cuz it works whenever your form works you don't think of it as a form when it doesn't work then you remember it's a form you use them every day as well Facebook Twitter iMessage what's that at every single point every day you're using a form one way or the other but you don't think about it as a form why again because it actually works and that's the most important thing so let us see some pretty terrible forms who wants to see some terrible forms exactly Wow so much negativity guys want to see terrible forms whoa Jesus all right let me make my damn mistake first don't you know these forms when you just go www haven't even typed anything and it's already telling you how this is wrong that is wrong you're gonna die this is just read everywhere you need to put eight parata's password like let me type the bloody password first then you can tell me and and for any example I show there's a stack way it's linked you can see there after don't let me submit if I'm doing something wrong you should never let it user submit a form if you know that they already doing something wrong why like be very clear about the information that is mandatory like you need because there's no point for me to submit a form if for example you need me to enter a password that's eight characters long don't let me submit the form and then come back and tell me you need eight characters password doesn't make sense you're wasting my time I'm gonna go somewhere else and spend my money but there are some exceptions call to actions and acquisition buttons those there are some exceptions to this rule focus only on what I'm currently doing wrong I know you have like ten different input fields but I want to just focus on what I'm doing wrong like if I'm you know this form here I'm typing the last name I haven't touched any other thing but the form is already telling me I need to enter a first name like can you just focus on what I'm doing you know so focus only because users can only interact with one input field at a time so that's very important and and it's important for you to know when the users are interact and when they've touched something when they've left very very very important and exam times an exception to this so if you will need users to fill your form in a specific order sometimes you can like Facebook for example when you're using Facebook you put your last name before your first name the name field would be red because like hey we need this because we need to spy on you really this first name you know and this guy this one nobody likes that one when you just walk into a page and you see this long form think about taxes you know that's why nobody likes filling taxes because it's like oh man and it's like if you refresh the page you're doomed and that kind of thing so it's like force actually have a direct effect on how we feel because if a form is nice you don't think about it like Google search you just say hey help me you know do my work stackoverflow this this this that that that and and it works but when it's too long or it's it's making you feel some type of way you you you don't feel inclined to fill the form another one is insured I only have to submit the form once there is no point in the trip to the server and making me come back right so if I'm filling this form here and you know I choose a username and the first name and then you're telling me oh by the way that username is taken after I've clicked submit you could have just told me that you know like told me hey this username is not available has been taken so that I can type a new username capisce don't let me submit that's what I say don't do it if you're building those types of forms stop right now stop stop don't build those forms how can we create better forms in angular right how can we actually create better for cuz this is an angular conference this is an angular talk right I introduce you to reactive forms if you have not heard of reactive forms congratulations this is the best thing that's ever happened to me and there are two types of forms in angular there's the template forms these though news and we have reactive forms please use so what are the features of reactive forms reactive forms they can observe they'll be observant what do I mean by they're observant they know when you're typing something they know when you've touched the field they know when you've left the field you know they know one to feel this value they know when it's invalid so it allows you to focus and just given a user a great experience instead of like constantly Melanie run think about jQuery forms those were the good old days no interesting times they need to have empathy you need to think like the user because your user is typing say for example the user is typing something like an American phone number and a lot of some websites say 3 3 4 correct 3 3 4 but if the user just decides to type everything without the dashes or maybe he decides to use the - maybe you should allow them you can do that validation on your own you know you can remove the dashes because that's what they used in the UK in our postcode system is alphanumerics of 4 3 up to 4 and then another alpha in America for and most of the times you put a space but if the user does not put a space forgive them because you already have the rules they should have empathy she empathize with the user you should focus on what they're currently doing you should be able to compose forms reactive forms are composable you should be able to take some business logic from your you know manager that doesn't want to give you a pay rise and just implement that you know because you know managers we need this by tomorrow come code it yourself you know they just think it's easy this needs to happen that's why we have a sprint it's called the sprint extent they should be extendable what do I mean by extend sometimes what forms do the normal things like HTML gives is not enough so you need to extend to have maybe some custom logic your own forms think of things like ionic where they have I on text area I on input because you need some some specific things reactive form building blocks so let's look at the building blocks of reactive forms everything inherits from this granddaddy called the abstract control that's the base abstract you cannot create a member of that but you have the form control the form group and the form array so to get started with reactive forms you just import the reactive forms module from angular forms and you put it in your imports block and you're good to go all right and that gives you a lot of things so let's talk about the first one which is the primitive the form control the phone control is when you need to just bind one specific input element or some form element just one not in a group you just need like google search for example it's just one input book you can use a form control and you create the form controller the instance and then you bind it via the form control most you code directive or property that it comes from the reactive forms on your inputs and then that would know how to add specific things to the template the next one is the form group and this is the most widely used one it works mainly with the form element this is when you have an aggregated set of fields you know and you want to construct a form it's used to aggregate group controls and it gives you an object based API so you access the controls as an object and this is what it looks like actually so you instantiate that you know you instantiate the the form group and then you add a bunch of form controls but actually it's not only form controls you can add in that form group you can also aggregate any abstract control so it could be a form control it could be a form group or also a phone array which we are going to see shortly that gives you real power to aggregate so many things and the form array is basically just like a form group but it gives you an array like syntax so if you have like for example a bunch of pages page 1 2 3 4 your like examinations for example and you want to keep states between each page you can use a full array for that and it's very very similar to the form group and it the same thing with a form group it not only uses the you you don't only have to put form controls in there you can also add any abstract control so any one of those new could be a form group or a form array itself so you can aggregate as much as possible so you also have a declarative approach to forms where you can just declare using the form builder and this is probably my preferred way of creating reactive form elements demo time did copyright I told you I was a Viking never seen a black vacuum before have yeah exactly so we're gonna demo a couple of things value change built-in validation composition custom validation and my favorite or which is custom async validation who wants to see some code good who wants to see some code that's more like it alright so let's go ahead so the first thing we're going to see is I took time last night you know to build Twitter again exactly I basically built Twitter and you can see the state of the form right now here so I'm going to end this slideshow here and then I'm gonna do this so I build Twitter and this is on stackless you have access and you can see the state of the current form I can tell when the form is touched invalid pristine right now its pristine because I haven't touched but soon as I touch something you can see it's dirty now you know and it's mostly code and as soon as I leave the focus is now touched and you can see the what's it called the Twitter account here I can type type type and I can calculate that so let's actually look at the code for this so quickly if you actually look at the code for this the Twitter form control code all I created was a form control and this form control I said it has to be required that's the validation rules that I said so if it's not required I cannot see the validation would not succeed and I'm also using ACM observable here to use the value changes which is what you used to check when a value of that particular form has changed and I'm doing max character count so I'm saying 280 - whatever the current values length is to see how many characters I have left and on the HTML side of things you can just ignore this bit all I want you to focus on is here where I bind that form control to that and that's though that particular form control has all those properties file a valid invalid and things like that and that's what I'm using to do the touch on touch I'm saying if it's untouched ng-if if it's valid invalid pristine dirty and there other fields that you can use you can check the state check so many things so this is how I pretty much just built this pretty quickly and and if I just remove that here you can see that the button is disabled why because the form is not valid what makes the form valid it can only be valid if all the validation rules are set and that's why I bound here the the disabled feature of the button to the cur the form control itself say it's invalid property so if it's invalid the form is disabled but soon as is valid it becomes enabled and I can submit so let's move on to the next demo the next demo I have here is this guy very very very popular because sometimes you don't want to evaluate on the form control stuff you want to validate on the form so here I need to make sure that the password and the confirm password match but they don't know about each other they isolate so the form control the form group itself is what would do that you can see a little table of each particular what's it called form consciously if I say Sani a gmail.com now it's valid you can see at the table it's been it's the it's still untouched and as soon as I go out it's been touched it's dirty and it's valid dirty means the value has changed for password I'm just going to put the most secure password which is one two three four five and and you can see confirm password is stolen valid right and if I come here and I say a B C passwords don't match but you see that I waited until the user left the confirm password to display that so I waited until they untouched I didn't just say no passwords not match and I'm like just give me a chance to fill the bloody thing you know but when I go and write one too and you see the submit button is disabled but if I go and write a most secure pass one in the world one two three four five suddenly the submit button is enabled I don't need to wait for you to untouched because I want you to be able to submit as soon as they match and let's go ahead and look at this code here all I did is created a form group with some elements and what I did is I just created a custom validator which is of just a pure function that in checks in the forum group itself and all I'm doing is getting that forum group accessing the control called password accesses the other control called confirm password and I'm saying if their values match return null that means we're good to go only return me an error if the values don't match saw like a flip boolean and that makes sense so I'm only returning something the name of the errors passwords don't match and if we look at the HTML here what you do is you bind the form group property to the form group and here you use the form control name the form control name only works within a nested context of a form group and you can have as many things and that's how I'm able to do all these things like does it have an error has it been touched does password and so I'm here I'm saying if it has an error called password match and password has been touched and confirm password has been touched then I show the error so that's all it is pretty much for that one so I have a last demo that I'm actually gonna show and this one took awhile cause I only fixed it like 10 minutes before this talk so thanks to all the guys that helped me out Chris Max in there these forms where sometimes you enter I'll give you an example of what inspired me for this form so I bought a SIM card the first time I came to America and when I'm back I need to like replenish the credit but on the website they don't allow me to enter a UK postcode I'm like that doesn't make though your whole business is about people traveling well you don't let me into a UK postcode so I can't actually pay for stuff because your post goes are five numbers while ours is different so I have to actually or physically call them so but it's very similar when you're ordering some stuff sometimes you want to know if people can deliver to you you don't want to send that trip to the server but you need to make a server call HTTP call angular reactive forms has something called a Singh validators that will actually send a HTTP call and wait for you to come back to calculate the validity of a specific form control or form group so let's use the zip code for example I've written this code where I only deliver to Beverly Hills California if you don't live in California I'm sorry you're not cool enough so so who does not live in California who can tell me where you live yes okay postcode zip code one nine one three zero so we did not deliver to your hood sir not cool enough yes and this is using a real API called zip apart is if the zippopotamas zippopotamas sorry african education it's not my fault so that's the API you just pass a postcode and it returns you a bunch of things but sir let's who lives in California California other all right postcode tell me where you live nine two six zero four so sir we deliver to you now I can take you to see Facebook you can ask for people's information nicely and they'll give it to you live on stage exactly very easy now I know where you live thank you so let's quickly round up and look at how that works all you do is you create an async validator which is just a function and you inject stuff into it I'm injecting HTTP because I need to make a real HTTP call and I return a function that gives me access to the actual form control itself that I associated it with is the input zip and I make that call and if everything is good I return unobservable of no but if I have a problem I return observable of something which is in this case state delivery only deliver to California pretty cool stuff and I think this is really good and this is what you used to do things like check if a username is available or things like that you can use something like that so let's go back to this slide there we go welcome evike in mama I made it all right so let's round up to get started today you can check all every single thing I've demoed these on stack stack weights so you can go there and live check it out you can check out the angular guide you can ask me a question and signing use of Twitter you can follow me I might not follow you back and Luke Kahn I kind of look cooler if I have more followers and people I'm following so I'm sorry yeah you can learn online because I'm teaching this stuff on UI school you can learn impress in an angular bucardo comm if you want to come to one of our classes and without further ado I would like to say thank you very much ng carve 1,500 people pleasures all mine thank you very much [Applause] you

Channel: ng-conf

Views: 4,198

Rating: 4.9523811 out of 5

Keywords:

Id: pRSqbDEmXH0

Length: 20min 26sec (1226 seconds)

Published: Fri Apr 20 2018