Angular 10 Tutorial #55 - Angular Template Driven Forms Tutorial | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in the last episode i introduced you to the concept of forms in angular today we will do a deep dive and learn about the template driven forms in angular this is part 55 of the angular 10 complete tutorial playlist i have planned around 100 tutorials for you in this particular series with detailed explanation use cases and live hands-on coding the playlist link is in the description box below the notes that we prepare in each episode will also go into the github link given in the description box below make sure you check it out so far in this particular series i have covered around 54 tutorials right from basic to advanced so make sure you check out all the previous episodes so that you learn and master angular 10. if you have any doubts in any of these topics that i've covered so far in the series feel free to reach out to me in the comments section i'll be happy to help you let's get started today with forms for forms itself i have planned around 20 dedicated tutorials with in-depth use cases and complex form structures if you have certain use cases that you want me to cover i'll be happy to add them to the list make sure you use the comment section to let me know what use cases you want me to cover alrighty let's start with template driven forms so what are template driven forms template driven forms are a way through which we can easily achieve forms in angular right they are easy to use they are simple and straightforward for the very reason that all the code that we write for forms will be in the template file or also we can say that the forms are created in the html template file these forms the validations that we apply will be html five basic validations which are provided by the html5 as attributes like for example required minimum length maximum length etc the beauty about template driven forms is that they are the forms are tracked automatically right which means you don't have to write any custom logic to create a form or track it they are tracked automatically we can also get the states of that particular form like for example touched dirty pristine etc remember that whenever we talk about template driven forms in angular we make use of two-way data binding technique what is two-way data binding i've covered that in the previous episodes during the data binding make sure you check it out but i'll do a quick recap here when we do hands-on most of the code will be in your template files right which is your html file validations are mostly the default html5 validations very minimal code goes into your component or the class file the that's why the unit testing becomes a challenge right unit testing becomes a challenge because very little code is written in the component side you only write the code for capturing the data and maybe processing it we'll see everything when we do hands-on alright so we are going to achieve this i have written step by step for you so that it's easy for you and you can follow it easily and add angular forms to your application the first and foremost step that you'll do is adding the forms module in app module you will import it to the imports array right then you will create the form in any component that you wish in this case example i have shown you that app component but you can create the form in any component you like will make use of ng form and ng model those are the two things key things that we will learn when we work with template driven forms all right we can add different form type input types to it like text radio check box email drop down etc all right so let's get started with some hands-on activity and we'll do these steps that i've listed on your screen so open up the your angular project that we are working and just do ng surf first so that we have the application up and running and then i'll take any component and to make it easy for you what i'm going to do is show you how you can create quickly forms using bootstrap in this but what i'm teaching you applies to angular material forms as well so make sure that you learn the fundamentals so that you can use any design framework of your choice if you're liking the video so far please don't forget to hit that like button for me all right so our application is compiled let's go here and refresh and we should see our basic application so our basic application is up now i'm going to the code and we see that we created a customer's route module right it's a lazy loading module and we have a component called add customer go to that add component it doesn't have anything any component that you work will have this default text which says add customer works or whatever component that name you have given followed by works right so what i'm going to do now is for your easiness to show you how easy it is we are going to take a default um bootstrap form from docs go here pick up any form of your choice okay there is no restriction you can take the simple form to get started or any form you can create one if you have it simple complex doesn't matter i've just copy pasted the form as it is it has some extra classes to it like styling etc okay again it is not necessary for you to have that so what i'm going to do is strip down this code and make it absolutely basic one for you okay that is only because i want to show you how easy it is to work with template driven forms all right so what we'll do i am just going to copy an input element right and keep it in my form rest i'm going to delete if you want see i'm doing this to show you how simple it is right in the minimal number of code i don't want you to think that it is complicated or anything it's absolutely simple very very basic okay so i have a form you create a form tag have an input type equal to let's say text i am going to delete everything else so that you know that it is the most basic thing to get started so all i have here is a form and an input type equal to text now remember friends that whenever you work with any template driven forms you have to make use of ng model okay that's the that's the key component of template driven forms and how do you write it it's a banana model so you write it in first in square bracket then in function so this is how you write ng model equal to given name say first name username whatever name of the field you want and remember that once you give ng model you have to mandatory give the name attribute half the time people make this mistake they do not give the name attribute and that's why it fails okay i will show you the error messages also in just a bit alrighty so now what we have done we have said that we are binding ngmodel firstname now we need to define this in our component class go to the component and add it here like this okay so what we are doing we are just doing a first name and we are saying its of type string equal to empty string okay so what we have done we just added a variable okay by the name first name and string it's empty now we'll be seeing some errors let's see what it is so it says it doesn't know what is ng model this is a common error that you will see that's because we did not add the forms module to our module so see since i am working in the component module i have to add the forms module in this particular module i'll repeat it here so that you know we need to import forms module in order to work with template driven forms remember this 99 percent times this is the mistake most people do okay they forget to import the forms module let's do that now import the forms module from angular slash forms okay once you import it here add it to the list of imports and save it now we should not see any error it should compile properly let's see that so see now it is compiling successfully it's compiled okay after adding the forms module to component module now take a look at this again so we have a ng model we are saying first name and we are giving a name attribute which is same as this all right so i'm going to do an interpolation here just to see that i'm getting correct data or not so what i'm going to do i'm going to add the same name as this now go to our application and navigate to customers route and say add so we see the input text box right so now we got the input text box let's try it by entering some values all right so enter some value and you see that is getting here which means our interpolation is working it means that our ng model is binded okay so this is the basic that you need to get started now comes the interesting part which is making the form work okay so how do you make it work so there is an attribute that we need to give to make our form and tell it that it is of a type ng form okay that's the most important piece half the time we miss that so let me show you that by how you can add a simple form right so what we are doing is a very very simple one so let's get started here and i will add the form writer now so go to your code here right so now we are telling what is this this is not a normal form rather it's we are saying that it is going to be a ng form right it's going to be ng form since we imported it but before that we'll create a template variable through which we will refer this form let's let's call this anything right you can you can call this anything and let's call login or add customer form okay you can give any name to this and we are mentioning that this is of type ng form this is important friends follow this step by step so first we added the input elements that we want we binded them with ng model now i'm saying that this is a form of type ng form and i'm going to say that when this form is submitted what should happen right once you submit this form what should happen so we'll say submit or say add customer form okay some method that will pass we are calling a method by the name at customer we'll just create that in a just bid and we will pass this form entirely okay now see this code once again carefully we have created a template variable name for the form add customer form which is of type ng form then we are binding a event and saying when this form is submitted call a method add customer and pass the entire form with the same name that we just created here right these two should be same right so this we have created the form now now what we need to do next we will say we'll need a submit button right through which it will submit it so let's create that and we'll just type equal to submit right and just say add customer right so you got a form you got all the things that are required now it says add customer is not defined which is correct because we have not initialized that in our ts file so let's go ahead and add it and i'm going to say add customer now right so what are we doing here we are adding a customer and we are telling that we will get a form here of type ng form it will be imported here if you see ng form is imported from forms so now i'm saying when this method is called we'll pass a value which is of type ng form right and for now let's do a console log of the entire form that we will get from the user okay that's it that's all you need to do to enable the template driven forms we got a input element we got a submit button open console he see here let's clear now i'm going to type name and hits and hit submit and you see that we get the entire form here right that means now we get the state value we get the value of it we get the form everything right so now if you say that i don't want the entire form i just want the value right now let's see enter some data hit enter you get the form value see again here we get the first name captured the value whatever is entered by the user right so this is an input text you are capturing the value now similarly if you have other fields like other elements now you will say this was an easy use case where we did text now i'm going to do say radio button right and i'm going to call it um or say check box or whatever you want to call it let's say check box and i'm going to set terms i want the user to accept the terms and this i'm going to add it in my ts file here and call it boolean right terms and we'll call it boolean and we'll give a initial value as false okay i've added a check box in my html and i'm saying it's terms and here in my component class i just said it's false by default okay so let's add some break so that you can see it again i'm not going into designing for a purpose because i want you to see that it's just a simple form you can design it any way you want in terms of design wise terms and conditions right you will say accept terms and conditions and now you see we got the basic form arc tutorials and let's clear this and i am accepting the check box and hit enter now you see terms is true right so similarly you can add any input element to this right so for example you want to have a select drop down that's also fine right again you will say ng model and name right now you'll say say for example customer type okay here we are going to give name customer type and here we are going to give option say premium right or standard some some values right you'll have value equal to 1 you'll have value equal to 2 right so now i'm binding customer type so go add it to the component class say that it is of type string and default value is empty okay now go here so you see that it's empty the default value now again enter values here select the check box and enter premium add hit customer now you see customer type equal to one right so i showed you example similarly i'll give you some homework so that you can practice so what i want you to do is add a text area follow the same steps add a radio button follow the same steps right these are the common input elements that you would use in your forms you got text box you got check box you got drop down you will add a text area like this right and you'll again give some ng model value type like this okay and you here you will say description or any name that you want right now you got it add it to the template here and make it a string make it default empty right so now you have the text area also in your form through which you can get the value go back here enter some value accept check box drop down enter some value in the text area hit enter you see description captured right here so what you learned just now is how to add the html inputs this is your static template driven forms right you are getting all the forms created right here you're capturing the value in your component class ideally you would do validations you would do some data processing like checking whether it is all correct some meets your standards then call api to save this data right that's the standard process we will do that when we start services for now we are just capturing the values okay go ahead give it a try in the next episode i'm going to show you how to add validations to this very form we will do different types of validations and get it working i hope you like this video i hope you learn from this video ask me if you have any doubts i'll be more than happy to help you thank you so much for joining if you like my work and tutorials please do consider buying me a coffee at buy me a coffee dot com slash arc tutorials i'll see you in the next episode stay tuned and we will learn entire angular and master it thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 6,818

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular route guard resolve tutorial, angular 11

Id: 7UGXXhs-Mtw

Length: 20min 2sec (1202 seconds)

Published: Sat Jan 23 2021