Angular Forms Tutorial - 5 - Binding Data with ngForm

in this video let's see how the data binding is happening with the form fields so far we have just created a basic HTML form nothing related to angular the first step to start working with angular forms is to import the forms module so open app dot module dot es and then import forms module let's also add forms module to the imports array now if we go back to app component dot HTML we still have what seems like a basic HTML form but behind the scenes angular's magic is already happening any time we use a form tag angular attaches an NG form directive to the form tag which gives us valuable information about that particular form it tells what the values of the different form controls are and whether the values are valid or invalid and how do we get a hold of a reference to this ng form directive using a template reference variable so to the form tag I'm going to add a template reference variable I'm going to call it user form and to this I'm going to assign the string ng form so the ng form directive exports itself as the string ng form and by assigning it to a reference variable we have a reference to the directive itself now I just mentioned that the directive gives us access to the values of the form controls it does so using the value property so in the HTML I'm going to use interpolation to take a peek at the form control values so double curly braces and then user form dot value and then pass it through the JSON pipe now if I save this and take a look at the browser you can see that we have an empty object I start typing the name which was and it still is an empty object you might be wondering why it doesn't work now if we ask angular why the value is an empty object it is going to tell you hey I am NOT going to track every single form control in your HTML let me know which of the form controls have to be tracked only then will I do that and how do we let angular know of the controls to be tracked using the ng model directive so to each of the form control let's place the ng model directive so to the input ng model ng model ng model to the Select tag ng model to the radio buttons ng model and finally for the check box let's save this and take a look at the browser now if I start typing we don't see the expected result so if I open the developer tools go to the console you can see that we have an error and the error is that if ng model is used within a form tag either the name attribute must be set or the form control must be defined as stand alone and we see that time preference works because we do have a name for time preference but for rest of the form fields we don't have a name attribute so along with the ng model directive the name attribute is very much necessary let's add the name attribute to each of the form controls the first one is going to be name is equal to user name the second one name is equal to email name is equal to phone name is equal to topic we already have the name time preference on the radio button and finally name is equal to subscribe on the check box now let's save this and go back to the browser and right away you can see there is a difference in how the object is being displayed all the form controls are present as properties of this particular object let's start filling in the form and see what happens so enter a name and you can see that name is updated email and you can see that email is updated similarly phone gets updated the select drop-down select a value and then that gets updated select a time preference you can see that that works as well and finally select the checkbox and you can see that a value of true is set in the object uncheck and it changes to false so we are able to retrieve the different form control values by making use of ng form and ng model directives input values correspond to the text in the field radio button values correspond to the value attribute select tag correspond to value attribute if present else it just corresponds to the text that is there and finally check box corresponds to either true or false now in addition to ng model angular also provides the ng model group directive we use the ng model group directive if we would like to group together or create a subgroup within a form for example consider an address address can have Street city state and postal code we can group all of those fields into an address object using the ng model group directive let me quickly show you how the code looks so I'm going to copy paste the HTML and go through the code so right at the very top I'm going to paste the HTML so as you can see we have four input elements one for Street one for city one for state and finally postal code and all the four elements are enclosed in a div tag that has the ng model group directive to the directive we assign a name called address now if we go back to the browser take a look at the form value you can see that we have the individual field names email phone topic and so on but at the start we now have a group of properties and that group is the dress object address contains four different properties Street city state and postal code so if you ever want to group together form fields make use of this directive now to understand template driven forms though we really don't have to focus on the ng model group directive I also want to keep the form as short as possible and that is why I am going to remove the code that we have just added but please do keep in mind when it comes to data binding in template driven forms we have three directives ng form ng model and ng model group all right so we are able to bind data using the ng model directive and we can send this bound data to the server when required using user form dot value although this works completely fine a better approach is to bind the data to a user-defined model and send that model data to the server let's see how to do that in the next video

Channel: Codevolution

Views: 192,194

Rating: 4.9283972 out of 5

Keywords: Angular, Angular Forms, Angular Forms Tutorial, Template Driven Forms, ngForm

Id: iyabqUWYsz4

Length: 8min 56sec (536 seconds)

Published: Mon Jun 18 2018