Angular Reactive Forms Tutorial (Angular 4)

all right so here's a real quick demonstration of the form that we're going to build all the way from the very beginning to the end okay so as we can see we cannot click on our submit form because nothing is valid yet so we have validation that's applied to both the name and also the description so we can see how these anime end will be covering all that and we can see this build is currently required so if I just hit effort any type of character it will go away in this field here we have a description as between needs to be between 30 and 500 characters so you know if I just paste this in real quickly it goes away and we can submit our form very easily at this point you could save it to the database or do whatever you want now we also have something down here that really demonstrates the power of reactive forms which is a minimum of three characters checkbox so right now if I simply click out of here and I just hit our little F key here and if we turn on it's going to change the validation that's required for our name input and the reason you would potentially want to do something like this in a rural case scenario is dependent upon you know somebody chooses a checkbox or changes any other value to something and it may have to change your validation requirements on your other input fields all right so we're going to be covering all of that so let's go ahead and get started oh but real quick before we begin make sure you check out my site course cetera com where you're going to find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like expect each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on all right let's get back to it all right so just so we're on the same page we're going to use the angular command line interface to start a new project now if you need help with this process such as installing and meeting all the dependencies such as no Jas and NPM then check out the free angular 4 from scratch course it's located at course cetera comm so assuming you have everything you need let's go ahead and we'll type in ng new and we'll just name this ng forms so I'm going to pause while this installs all right and then we'll CD into it which is at C D and G - forms and we'll go ahead and run ng surf with the open flag which will open up a browser automatically whatever you have running as default of localhost 4200 alright and there we go this is our default angular 4 app that is started now by the way if you're watching us in the future and it's angular 5 that doesn't necessarily mean that this tutorial is broke or outdated okay so what we're going to do is we're going to go to our code editor now and open up the project and the first thing that we need to do before we construct any type of form is to import the reactive forms module into our app module PS file and that's located in our source app and right here okay so what we want to do first is we're going to add the reactive forms module into this right here and this is included in the angular forms library we'll copy that and then we're going to add a comma just after HTTP module and add it as an import and we'll save it okay great so now you know at this point you could either choose to start going into your template and defining the HTML for your form or you can go to your component really it just depends on your own preferences so we're going to work within the component code first so we have to first start by importing some necessary form specific functions and the component that will house perform so that for us it's going to be just this standard app component right here so we're going to import three different form classes from the angular forms library that is the form builder they're our form group into validators so each form that we have is going to be bound to an instance of form group and then we use the form builder right here to handle form control creation and within that we use the validators to set up validation for each of our form inputs so you'll get a better understanding of how this works as we progress so now what we want to do is within the class here we're going to get rid of this title we're going to define just a few different properties so I'm going to paste this in based on the written tutorial that is at Coursera calm and just give you a quick exclamation real quickly of what is going on here with these properties so first we have our I property right here called our form which is bound to form group and we have a post of type any so when we handle form submission I this is going to be in reference to that we also have the description of type string bound to this empty and also the name and that's bound to I nothing as well and it's a string so our form again it just has a name and a description primarily so now within the constructor we're going to use dependency injection this is going to be private form builder to form builder alright and next this is where we specify the validation so we reference our form and by the way that's in reference to reactive forms and then FB group all right so now we have really three different inputs that are part of our form so first we have name and inside of here we add for the first argument we're going to leave as null as the first argument allows you to specify a form value so we're not going to do that I the next is where we set up our validation and this is where we reference our validators class up here so we'll go ahead and just say that the name is required so to do that validators dot required that's it very very very simple so let's go ahead and i'm going to come over here well paste this and changes to description and let's say for instance that we ate this particular input we want to have multiple validation requirements so not only will be required but maybe when we want to have a minimum length and a maximum length which is obviously a common validation requirement so the way we do this is we use first validators dot compose so right before this validators dot compose and then we wrap it in a parenthesis and a bracket so we'll close this out real quick so it's going to be required and then we just start separating this right here by a comma and then the reference validators again dot minimum length so min length will say 30 and then validators not max length and we'll make this 500 all right so what we want to do next is I'll also don't forget to add at the end our parenthesis and a closing bracket over here alright and also we're going to have that check box and that's not going to be required however we need to reference that we can access it later on when we do the setup for that check box and making it change the validation on our name input here so that looks like simply validate which will be the name and then we'll just set it to empty right there all right so let's go ahead and we'll save that so now we want to add a custom method of add post for handling the submitted form so just beneath the constructor link add post will accept post here and this description equals post description and this dot name equals post name so this is where you would you for example if you had a back-end or an API of some sort you would make the call to your service to store it or do whatever you want with this information but right now we're just setting our description in name bound to the submitted description in name from the forum alright so for now that's it for our app component let's go ahead and focus on the HTML so control B control B again to hide that alright so there's a fair amount of vibe HTML involved here and what I want to do first before we begin that section is I'm going to import the front-end framework called foundation which I use a lot in my tutorials and it's just real quick and easy for structuring and setting up a form or a layout of a website so it's kind of it's basically a competitor to bootstrap so we're going to hit ctrl B and we're going to go down to our index dot HTML and I'm going to copy and paste just above the closing head tag this line right here so if a control B you'll see everything you need and if you want to go to the written tutorial of this this tutorial the written version you can just copy this from the tutorial right here and that's just going to give us foundation right there all right so now let's go back to our HTML real quickly and get started so I'm going to copy our first lines get rid of this stuff all right so what is happening here okay so basically we're just saying that if the name property does not exist then show everything that's going to be inside of this div so real quickly let's go ahead and close that off and so if the name property does exist we're going to go show form info which is going to be a local variable I local template variable and the way we access that which we can go ahead and do that real quickly I'm going to copy and paste that blip in real quick so we use ng template and then we put a hash sign with the names a form info all right so if name does exist or if they already submitted the form successfully then it's going to show this and not the stuff up here all right so does it make sense hopefully so we have a div class a form container we have a div class of row columns this is specific to foundation it just basically helps structure their simple container and then we have interpolation of the name and description properties that we define in our component file right here and here so it's just going to show us what the user submitted all right so let's go back here and the next section is the form element so I'm going to go ahead and paste this in also close it off right here all right so when you're using reactive forms on the form element right here you have to wrap form group into brackets and we bind it to our form and remember that's the name that we gave it in our component our form as form group all right so then we use event binding on ng submit so when the form is submitted then we're going to call add post and we're going to post or pass in our form value which that will send in all of the input values that are contained within this form right here to our method all right so next I'm going to go ahead and simply type out the rest here class equals form container again this is some custom CSS that we will paste in a little bit difficult all um's so it's structured similar to our ng template down there and first we have I'm going to go ahead and just copy a little bit of this have a title right here and then we have our first input so we have our label of name input type is text form control name equals name so this right here name has to match this right here so this controls the validation of this element this input element with the name the form control name of name very very simple so next we have a text area for description and it's the same exact thing we have our form control name of description matches up to our component description there we go again very simple and then also we're going to have a check box so we'll have a label and an input type of check box here's our label right here on line 17 and then 18 we have type of check box name is validate control name is validate value is 1 so if it's checked that's the value it's going to be passing on to our add post through our form dot value ok so then finally we just have a submit button there's nothing special about this with exception to the property binding that we have on the disabled attribute and this is disabled if the form is not which is indicated by this not operator here if it's not valid so if it's not valid disabled will be added to this button and you won't be able to click it if it is this will be removed ok so that's pretty good for now to go ahead and save that and before we actually check this out in the browser I want to real quickly just go ahead and style the form and so this would probably be a good point to head on over to the browser check out the written tutorial and you'll see a section called styling the form and we're just going to copy and paste just a few rule sets in two different files so control B I'm going to go to styles the CSS and paste this in it's just two rules that are basically 1 import and we're just changing the background on the body we'll save that and then we'll go to our app component CSS and I'm going to paste in just a little bit here right there so what's happening has very quick exclamation we have the form container and that's just kind of structure the container that's going to house everything it makes the background white gives us some padding we have alert which we are not going to mess with the alert yet because we have an integrated we'll cover that shortly in this video we have our button and just just styling a couple different things in an animation for our alerts we don't have to worry about any of that right now but go ahead and save that and visit your browser again make sure your ng serve command is ran and here we go so I if we click out of it we don't have any type of message because we didn't do that into template just yet but we can notice that the submit form we cannot touch cannot submit it so if I type in you know asdf here and then also I start doing this so we can get to 30 characters there we go now we can submit the form again if we can remove this can't submit it because it is required so we'll go ahead and submit it there you go so real quickly this is fine but it's really not a great user experience so we should show an actual validation message that lets them know what exactly is needed so they can get to submitting the form because sometimes that can be confusing and extremely frustrating so we'll go ahead back to our code here we're going to go to our app to dock and put onto HTML and just underneath depending on where you want this to show up underneath is pretty much standard we're going to real quickly reference a div class right here of alert we're going to add ng if all right so this is we're going to put an odd operator our form thought controls name so that some reference to the above control valid so it's saying if this is not valid and our form controls name dot touched so real quickly I'm just just to show you what this does I'm going to remove that and we're just going to save it just with this first rule right here I we're going to go ahead and I'm just going to put this is required I'm going to save it we'll go back to our section right here alright we'll see by default when the form loads it says this is required so if we don't add that touched requirement this is going to show up on all of our alerts or our validation requirements you don't want that obviously you only want to show up when they focused on and off or have touched that given input type field so let's go ahead and real quickly we'll add this back I'll save it and then we'll come back and now as you see it reloads and we cook off there we go this is required okay so over here we're not going to bake in the actual message we're going to use interpolation to show a specific property that we're going to define in our component so our interpolation brackets will call this title alert we'll save let's go back to our app component and add that real quickly so title alert type string equals this field is required now we can save it real quickly let's go back this field is required now why would I want to do that because we're going to be using this specific name field right here along with our validate checkbox to change the validation requirements when that checkbox is pressed all right so again you can add this I'm just going to paste in a second one here for our description validation message so I'm going to paste this in it's very similar to the top one however the one difference is is that we're simply not going to use interpolation we're just going to put you must specify a description that's between 30 and 500 characters and again this matches up with the requirements and app component because we could see minimum length is 30 max length is 500 okay so now we can go ahead and save this in both of these I will work so down here down here and that will go away if you satisfy you know the needs of the validation so goodbye there we go now we could submit all right that's awesome so you know another way to demonstrate the powerful nature of reactive forms is by we're going to utilize this check box right here so nothing's happening when we check on it all right so we have to tie into that in our component class real quickly so we're going to add the ng on an it lifecycle hook all right so when this component loads this stuff in here gets ran so what we'll do is reference this to our form get and we'll get our validate field value changes all right so all of the fields that are defined up here have the ability for us to tie into value changes so we're going to subscribe all right and inside of here we're going to add or pass in rather validate and we're going to say if validate or the value of the value add a check box equals 1 and if you recall real quickly we'll see that our check box the value is set to 1 then inside of here we'll say this our form get name because that's the validation rules that we want to change set validators and this allows us basically within here to redefine the validation requirement so let's add in validators dot required so we'll still make it required and then we'll add a validators minimum length requirement right here we'll just say three all right so it doesn't really make sense I but this is just to show you how to do it not exactly why so now we'll also change our title alert because now not only is it required it needs three characters so this title alert equals you need to specify at least three characters okay now we're going to say else right here and I'm just going to copy real quickly and paste we're going to set validators back to the original which is just right up here all right great so now what we can do is save this and we'll come back actually at the very beginning we have to add at the very end of this this to our form get name update value and validity and that's giving me a red line because that is not to go there it's to go here all right so we'll go ahead and save this and we'll go back alright so just to demonstrate how this works right here by default because this is neck not checked on we can satisfy real quickly by hitting any type of character because it simply requires now if we turn this on watch what happens up you need to specify at least three characters so there you go that is basically the power of reactive forms in that it lets you to control validation through your component class you can also do unit tests on reactive forms where as these are two things that you can't really do with template different forms which I'll cover at a later date I but yeah there we go so this is my awesome title corset Row is great that's a shameless plug right there and then here's my stuff right here submit form there we go alright so if you enjoyed this please do check out course cetera comm and check out all of our courses just release this one over here right here yeah alright I'll see you guys very shortly make sure to subscribe here on YouTube as well good bye

Channel: DesignCourse

Views: 168,043

Rating: 4.8965073 out of 5

Keywords: angular forms tutorial, angular forms, angular 4 forms, angular reactive forms, reactive forms tutorial, angular 4 reactive forms

Id: bo1Wu0aiigU

Length: 25min 10sec (1510 seconds)

Published: Wed May 10 2017