Angular Forms Tutorial | How to build Angular 8 Reactive Forms | Angular Training | Edureka

[Music] hi all I welcome you to this session on angular and today we are going to learn all there is to know about angular forms before we begin let's look at our agenda for today so first of all I'm gonna start with talking a little bit about angular forms a little introduction to angular forms then we are going to do a head-to-head comparison between reactive forms versus template driven forms followed by which we are going to look at each of these types of forms separately and in more detail with that I come to the end of this agenda kindly take up this time to subscribe to us and don't forget to hit that Bell icon to never miss an update from the ED eureka youtube channel also to learn angular you can look at our certification training the link to which I leave in the description box below so without much ado let's get started so angular forms assist you in managing the user input it accepts the input and sends it to the server for processing and as we all know the majority of web applications depend on forms to serve various purposes such as retrieving search results entering emails submitting black details signing in using usernames passwords etc angular basically provides two types of forms namely reactive and template different forms however the building blocks of these forms are common first of all you have your form control which is used to keep track of the values in the validation of each form control followed by form group which is used to track the same values along with the status for a collection of form controls then you have something known as a form re now this feature is used to keep track of the same values as mentioned before along with the status for an array of form controls and finally we have controlled value accessor which is used to create a link between the form control instances and the original Dom elements now if we did a head-to-head comparison between reactive forms and template driven forms Weaver noticed certain differences between them setup now in reactor forms the component class directly defines the form model whereas in template driven forms the ng model directive is liable to generate the form control instances the reactive forms which are built within the component class are more explicit whereas template driven forms are less explicit then we have something known as a dataflow no form elements in reactor forms are associated directly to a form control instance whereas in template driven forms each element of the form is linked to a directive and this directive will manage the form model internally next let's look at validation now reactive forms define specific validators as functions these functions receive the control to validate template different forms are linked to the template directives and must specify the custom validator directives that wrap up the functions for validation moving on let's talk a little bit about testing now testing the easier one comes to reactive forms as there is synchronous access to the forms and the data model therefore reactive forms can be tested without having to render the user interface on the other hand template driven forms make testing slightly complicated as they require a some knowledge of how the directives are executing for every cycle as well as the change detection process then let's talk a little bit about mutability the data in a reactive form is pure therefore the forms are immutable so in case there is a change that is triggered a new data model is triggered by form control in template driven forms on the contrary there is mutability they are mutable they make use of angular's two-way data-binding in order to update the data model where there are changes made to the templates and finally scalability angular's reactive forms not just provide synchronous access to the form model but they also provide low-level api switch help in easily creating large-scale forms template driven forms focus mainly on simple scenarios now that we have a clear distinction of both the kinds of forms let's go ahead and look at each of them in some depth so first of all we have reactive forms now Angelis reactive forms can be used to create forms whose values change with time they provide a model of an approach to handle the state of angular forms at some given time as mentioned earlier when changes are initiated they give rise to a new state thereby taking care of the integrity of the form model reactive forms cater to a direct path for testing purposes as the data is predictable and consistent so let's move ahead and create them I have already created an angular project here in case you have any doubts regarding how to install angular and create an angular project you can refer to the angular 8 tutorial the link to which I've leave in the description box below so the first step is to import reactor forms module this module is present within the at angular slash forms package so I will open this file which is the app dot module dot ES file and import it next I will have to add it with the imports area as well you next what you're gonna do is create a new component using the command ng generate component RFS now orifice is the name of the component it can be anything so you can basically give any name of your choice remember that whenever you create a new component you will have to import its class within the AB dot module dot es file so you're gonna go ahead and open the app dot module dot ts file now as you can see on the screen the component has been added in my ab dot component dot es file and this is because I have added the auto import extension if you do not have this extension you will have to manually import it now the most basic building block in the case of reactive forms is the form control class so you will have to import the form control class within the RFS dot component dot ts file and then you're going to create a new instance that is the employee name of the form control which you are then going to use as class property in the templates you here we have set the initial value of the employee name as an empty string using the form control constructor you all the controls that you create in your component class will help you in various tasks such as getting instant access to listen for updating checking the form validation etc moving on we have step three which is updating the template once you create controls within the component class you will have to link it to a form control element within the template of the component next you'll use property binding to bind the form control provided by form control directive to the name value okay so now the form control is registered to the employee name input element present within the template of this component here the form control and the dome element will communicate to reflect changes made in the views and the templates the final step is to display this component to do this you will add the selector of the Arthas component within the app dot component dot HTML file next we are going to open the Styles dot CSS file of this application and then add a bootstrap link to add some cascading style sheets to this application finally you're going to save and run the application using this ng self command you as you can see the form control that you assign to the employee name property is displayed on the screen next let's go ahead and discuss something known as a control value management now at any point in time angular reactive forms give the user access to both the form control state and the value to change the current state or the values you can use the component class and the template let me show you an example of how to display the value of the form control instance and also change it the first thing to do is to display the form control value you can do this in two ways one either through the value changes observable where you can listen for the changes in the forms value in the template using async pipe or in the component class using the SUBSCRIBE method and the second way is with the value property which gives you a snapshot of the current value in the following example I'll show you how to display the current value using interpolation in the template so when you modify the form control element this displayed value will change accordingly angular's reactive forms give you access to the details about some control through the properties and methods provided with the instances these properties and methods of the underlying abstract control class are used to control form state and determine when to display messages when handling validation now how can you replace a form control value so the values can be changed without the user interaction a form control instance provides a set value method that updates the value of the form control and validates the structure of the value provided against the controlled structure for example when retrieving form data from a back-end API or service you can use the set value method to update the control to its new value which replaces the old value entirely we are going to add a method to the component class that will update the value to John using the set value method you we are also going to include a button that will update the name you now let's get back to the development server as you can see when I click on the refresh button the value of the employee name gets updated as John now the next thing is how to group form controls Acela form control instance as we have seen in the previous example gives us control over a single input field similarly a form group instance checks the form State for a group of form control instances when the form group is created every control present in a form group instance is traced by the name in the next example we will see how to manage multiple form control instances in a single group what we are going to do is we will import the form group and form control classes present in the at angular slash forms package so the first thing we're going to do here is to create a form group instance you now let's create a property called the employee form and set this to a new form group instance to initialize the form group you're going to have to provide the constructor with an object of the name keys mapped to their control for the employee form we are going to add two form control instances namely the name and the designation you the individual form controls that is the name and the designations are now grouped together the form group instance provides its model value as an object reduced from the values of each control in the group this group instance had same properties and methods as those of form control instances the next step is to link the form group model with the view or the template now for every control the form group will track the status and then modify in case even one of the controls is changed the pen control also generates a new status or value change the model for the group is maintained from its members now after you define the model you must update the template to reflect the model and the view I will copy paste the code that I already have heard of employ form form group is linked to the form element with the form Group director this creates a communication zone between the model and the form that consists of the inputs the input form control name which is provided by the form control name directive binds each individual input to the form control defined as form group the form controls that we have created here will communicate with their corresponding elements and not just that they also communicate changes to the form group instance which provides the source of truth for the model value so the next thing is to save the form data so how are you going to do that the ahrefs component accepts input from the user but in a real scenario you will want to capture the form value and make it available for further processing outside the component the form Group directive listens to the submit event emitted by the form element and emits an NG submit event that you can bind to a callback action now all you have to do is add an NG submit event listener to the form tag form tag with the on submit callback method you the onsubmit method in the ahrefs component captures the current value of the employee form you now let's make use of this button element and create a submit button you let us get back to our development server and see how the form we just created looks now this is how your form looks similarly you can also create nested form groups to do that you are going to add the employee address with the employee form so let's get back to the RF s dot component dot es file and add some nested fields now the address will have two subparts namely the country and the city I will copy paste the code that I already have you so what we're gonna do is create new form control instances for them that will be nested within the address form group finally you're going to add these fields within the views so the name and the designation becomes one heading and the address will be the other let's get back to the development server and see how it looks so this is how it looks so by now you must have understood how to create reactive forms in angular in this tutorial we will not be focusing on form validation so let's move on and see how to create template driven forms in angular now in the previous section we created an employee form using reactive forms now what we're gonna do is create a separate template driven employee form to do that first we are going to create the employee model class followed by creating the component that controls the form the third step deals with creating a template that specifies the form layout and the next step is to bind data properties to each form control using the ng model two-way data binding syntax finally we are going to add a name attribute to each form input control so first of all let's go ahead and create the employee model class this model class will specify the layout of the form you can also call it a property bag that holds facts about a thing of application importance that describes well the employee class with its fields such as ID name designation and an optional field such as skills so within the command prompt type the command ng generate class EMP to generate a new class named EMP I will copy paste the code that I already have now it is the job of the typescript compiler to generate a public field for all the public constructor parameters not just that the compiler will also auto assign the value of the parameter to that field when you create employees now an employee can be created by creating an instance of the EMP type and passing the designated values to each of the fields such as ID name designation and the scale so the next thing you're going to do is to create a new component for the template driven form now in angular forms there are basically two parts that is the template which is based on HTML and a component class which handles the data and user interactions technically we are going to begin with the class as it briefly describes what the employee editor can do so within the command prompt type the following command then what you're gonna do is within the component class create a list of skills such as Java Python SQL and C++ you and then create a new property known as model that will hold all these EMP fields or M fields so I will just specify the ID as 1/1 Nima's Jean designation as project manager and set the initial skill to the skill present at an index number zero which is Java you this component is just like any other component you create in an angular project there is nothing that is specific to the form so simply put the import statements import the angular core library and the amp model that we just created the selector present within the app component decorator specifies the value of app - TDF using which you can add the form in the parent template using the same tag the template HTML is pointed out by template URL and finally you have your employee data within the component class so next what we are going to do is we are going to modify the route module here the app dot module dot ts specifies the applications route module you can add external modules that you will need to use in your applications and declare all the components that are a part of this module therefore you will need to add the TDF component within the app dot component dot TS file next you will have to add the forms module within the app dot modules file because template driven forms are in their own module therefore I am going to import forms module and also specify it within the imports array now our application has access to all the template different forms features including the entry model also if you have noticed the TDS class has been imported automatically because of the auto import extension if you do not have this extension make sure you manually import the component class as well as add it within the imports are we moving on next you're going to display the template driven form now to display the content of the template driven form you're going to have to remove the reactive form tag from the app component dot HTML and replace it with the app - TDF tag so next we are going to be creating the HTML form template I will copy paste the code that I already have and this is what it looks like so here we have specified the name designation and the skills please note that for skills I have made use of the ng 4 directive in case you do not know about this structural director you can refer to our angular directives video the link to which again I shall leave in the description box below now if you're gonna save everything and run the application using ng serve so what do you see now you probably see the form but no data and this is because we have not performed any two-way data-binding yet so let's go ahead and do that now for this I'm going to be using the ng model syntax which makes it easy to bind the form to the model now let's go ahead and run the application as you can see the data of the employee has been retrieved and if I make changes to any of these details you will see that the corresponding value within the diagnostic output also changes now this is because of the two-way data-binding let me just go ahead and show this to you all as you can see the name appears to be Joe so when I make changes to John you can see that the name is being altered within the diagnostic as well this brings us to the end of our session I hope you have enjoyed and learned something new in case you have any doubts or queries please do let us know in the comment section below and we will revert to you at the earliest thank you and have a great day I hope you have enjoyed listening to this video please be kind enough to like it and you can comment any of your doubts and queries and we will reply them at the earliest do look out for more videos in our playlist and subscribe to any rekha channel to learn more happy learning

Channel: edureka!

Views: 37,585

Keywords: yt:cc=on, angular forms, angular forms tutorial, angular form submit, angular formarray, angular forms reactive, angular forms reactive vs template, angular reactive forms tutorial, reactive forms angular 8, angular reactive forms array, angular 9 reactive forms, difference between template driven and reactive forms in angular 7, angular template driven forms, angular template driven forms tutorial, angular 8 template driven forms, angular edureka, edureka, angular 8 tutorial

Id: F45ZW1oDLy4

Length: 25min 45sec (1545 seconds)

Published: Fri May 01 2020