Angular Forms Tutorial | Angular Tutorial For Beginners | Building Forms In Angular | Simplilearn

hey everyone welcome back to another video by simply learning in today's video we're going to learn all about angular forms do check out our other videos on the angular series so before we begin if you haven't subscribed to our channel already make sure to subscribe and hit the bell icon to never miss an update so first let's go ahead and look at what's in store for us first we will understand what angular forms are then we'll look at the different types of form building supported by angular next up we'll get acquainted with features like form control and group control and we learn all of this with the help of a simple demo so without further ado let's begin so what exactly are angular forms now i'm sure every application that you use comes with certain amount of form filling correct be it your login credentials or your sign up forms or any sort of registration forms etc so forms are an integral part of a web application you need forms to update your profile or to enter sensitive information are also to perform any sort of data related tasks so now let's look at the different types of form building supported by angular first up angular supports two types of form building first you have the template driven approach and second you have the reactive approach now let's look at them one by one so talking about template driven approach in this method the conventional form tag is used to create forms so angular automatically interprets and creates a form object with the help of the directives now controls can be added to the form using the ng model tag now multiple controls can be grouped using the ng control group module so it basically uses several module classes to provide controls now if you don't get this don't worry you'll understand better when i'm showing you the demo next up is json values so form value can be generated using the form dot value object form data is exported as json values when the submit method is called lastly basic html validations can be used to validate the form fields in the case of custom validations directives can be used so arguably this method is the simplest way to create an angular form so moving on to the active approach now this approach is the programming paradigm revolving around data flows and propagation of change now with reactive forms the component directly manages the data flows between the form controls and the data models now reactive forms are code driven unlike template driven approach reactive forms eliminate the anti-pattern of updating the data model by a two-way data binding so it does not use two-way data binding and typically a reactive form control creation is synchronous and can be unit tested with synchronous programming techniques so now let's go ahead and look at form control and form group so consider a typical form consisting of fields like name age and location now a form control is basically a class that enables validation of these fields for each input field an instance of this class is created now these instances help check the values of the field and see if they're either touched untouched dirty pristine valid invalid and so on so this allows you to check every field for the value it makes it easier to understand which field's value is invalid or which field has not been entered etc now moving on to form group so a form group class represents a group of controls a form can have multiple group controls the form group returns true if all the controls are valid and provides validation errors if there are any so i hope this was clear so moving ahead let's look at the demo to explain all of these features i'm sure it will become extremely clear once you look at the demo so for that let's head to our vs code so back in my vs code i've created a component called form component and i've also included the simply learn logo just to beautify the appearance so once you execute the code this is what you're going to see on your browser so you just have the logo at the moment the first thing we need to do is we'll have to import the forms module all right so oh but before we begin let me tell you what the use case is so we're going to be creating a user registration form which is going to include four fields that is the first name last name email id and a password all right so now let me show you how to import the forms module so in your main app.module.ts file you will have to import forms module from angular forms all right and then in your imports you'll have to just call it here all right so this is just a simple step and now once you're done with that let's go ahead and start our form creation so here in my component.html let's enclose the entire form within a div tag so here let me say div class is a container within which let me just have one heading it says user registration all right and now let's go ahead and create our form so first let me just say form now i'm going to create a div class for every field so say div class equals form group i'll explain it to you a little later now first let's create a label so label tag for basically it's the first name so let me just say first name and the tab will basically have first name again all right and let me just break the line next we have the field so let's say input type is text name is first name and we have a class which is the form control class all right so this we have to do for all the other fields so let me just copy this and paste it like four times i'll also add the tag for spacing let's do that here and finally we'll have the button so let's just add that here with a type submit let's just say submit on the button so now let's go ahead and change these values here so here let me just change it to last name here as well and here as well and in this case it is going to be email so let me just change it here and finally we have password so let's add that here all right so let's save this and just have a look at our browser so there we go we have our uh user registration form ready but i would like to uh align it to the center so let me just do that so here in my css file i'm just going to uh align all the div tags the center and the label tag to the left so let me save this and look at the browser now and there we go we have our registration form with a logo so this is how you create a simple form now we'll have to add a directive called ng model now this directive when added into the input tag will provide form controls to every input field all right so here let's just go ahead and say ng model that is it so let me just copy this and paste it for every other field all right let me save this and back in my browser let me inspect and here you can see different types of classes like ng untouched ng pristine ng valid are added right so this indicates that angular has recognized the form tag and it has added these classes to the form as well as all the fields so this is achieved when you add the ng model directive in your input tag now back in my vs code now every form has an output property attached to it called ng submit all right so this property can be bound within a method that method called the subbit method so once submitted this method is called right so once we click on the submit button this method has to be called so to include that we'll have to just save form ng submit equals submit all right so now we have to define the submit method in our component.ts file so here let me just go to our component.ts file and let me just get rid of unnecessary code here and let's define a function called subnet and then here let me just console log form submitted all right so let me just get rid of this as well it's unnecessary here let's save this so what it means is that every time you click on the submit button this method is called all right so let's just have a look at the browser so first let's go to our console and when i click on submit it says form submitted all right so the next crucial step is to generate javascript representation now we'll have to make use of another directive called ng form that is assigned to a template variable okay so this javascript representation helps with validating all the fields so i'll help you understand that better so back in our html file let's just create a variable first let's call it login all right and say ng form okay now the mgform object includes the javascript representation so now while you're calling the submit method you're going to pass login as a parameter so let's just say login here and in my ts file again let's just say login and along with it i want login to be displayed so i say login again so now let's save this and if you have a look at the browser let's click on submit and now here you can see the javascript representation so within form i can check for email or say first name and here for this field first name you can see different properties attached you can see invalid is it invalid or is it untouched which is true or are there any errors so this basically gives you all information about the particular field so we can make use of this feature to validate the information so we're going to learn about that in our next segment moving on to form validation one way to ensure that incorrect fields are not submitted is by disabling the submit button correct now apart from this you can also specify certain properties in your input tag for the corresponding input field now um let's say that the fields that now let's say that the fields can't be empty and the form only accepts names with the minimum length of 2 and the maximum length of 7 all right so here in my input tag i just mentioned required meaning this field cannot be empty and min length to 2 and max length to say 7 all right so to check this let's go to our browser and here let me submit the form without filling the first name and evidently there has to be an error so when i submit it and i look here what's in forms and here controls and my first name you can see that an error is shown here it says required equals true that means that there is one error now you can make use of these form control objects you can leverage form control objects to ensure field validation and display a message whenever an error occurs right so to do that you need to access these objects like errors or invalid or touched all of these properties or objects need to be accessed for that we'll have to create a template variable and then this variable is assigned to this object so back in our vs code let's create a variable let me call it name and let's say ng model all right here the variable name receives the control object so here back in my browser when i submit again without the first name you can see that the invalid property is set to true correct so this helps us use this property to alert the user with the help of a simple if logic so back in my vs code let me create another div tag within which i mentioned ng if within which i'm going to use a simple if logic so let's say ngf name which is our template variable name dot touched and name dot invalid is true right then i'm going to alert so i'm gonna make use of an alert here let's say alert danger all right so in my css file i'll have to mention the simple styling for alert so here let me just say so we're going to have the background color red for danger all right and here i'm going to display the message invalid in bold so now let's go back to our browser and check it so let me proceed without entering the last name it says invalid here so this was a simple demonstration to show you form validation of course you can modify the code depending on your requirement say suppose the length of the first name is too short then you can alert the user with a different message or suppose they have missed out on filling a form field then you can again alert the user so you can basically make use of the nested if condition right now just to help you understand that better let me just show it to you now back in my html file instead of invalid let me have another tag a paragraph tag within which i make use of ngif again now ng if name dot errors dot required is true then i display the message first name required all right and if the length of the first name is not two now if the length of the first name is less than 2 then i'm going to display another message so let me just say name dot errors dot min length if this is true then i'm going to say sorry short first name all right so let's save this and have a look at the browser when i proceed without providing the name it says first name required but when i type in one character it says sorry short first name but if i type in another character it accepts so i hope this made you understand how form validation works so this was just a simple demonstration again now i highly recommend you explore these properties and play around with these objects trust me it's really fun so i hope this tutorial helped you out so with that we come to the end of this session uh thank you so much for being here watch out for more videos on angular and i'll see you next time until then keep learning and stay tuned to simply learn [Music] hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 11,049

Keywords: angular forms, angular forms tutorial, angular form submit, angular form array, angular reactive forms, building angular forms, angular reactive forms array, angular template driven forms, angular template driven forms tutorial, introduction to angular forms, how to build angular forms, angular forms management, angular forms explained, angular, angular tutorial for beginners, angular training, learn angular, simplilearn angular training, simplilearn

Id: -bGgjgx3fGs

Length: 20min 50sec (1250 seconds)

Published: Fri Sep 04 2020