Reactive Form in Angular | Using FormGroup | Using FormBuilder | Angular Tutorials

welcome to learning Partners so in this video we are going to see reactive form so there are basically two ways how we can create reactive form first is using form group and second one is using form Builder service right so both we are going to discuss so first we will start with form group so when we say about uh when we talk about angular we have two types of form one is the template form which we design using NG model and second is the reactive form right so first thing when you have to design a reactive form first thing you need you need is like in your app module just like we have forms moduel just like that we need to import a reactive form module right so in your app module make sure you have reactive form module and it is added into the import statement like this right for template form you need the forms moduel and for reactive form you need reactive form moduel in your app moduel right second thing let's con let's consider like we have a user form let's use Json placeholder API Json placeholder API and from that we can use to what object we have let's try user only so user object is there okay so for this uh Jon plus holder free we are going to do the crowd operation but the reactive form right so let's say this is kind of object we won't take all the fields but some fields we will take so first step was let me just write add reactive form module in app module right this will be your first step when you are starting to design a reactive form Second Step will be in your component you need to design a form so how do we design a form that will be in the TS so we have to go to the TS right let's say user form I need to provide the data type to this variables it's just a proper variable does the data type will be providing is form group so for form group also you need One Import so you just need to select it so that you can see at the top you have got the import also added right after that I will create a function let's say initialize form or I will first in inform here only is equal to new form group round bracket curly bracket enter right so this is the normal form we have created just like object we used to create a template form just like that we need to create a form over here right so in that we need to specify how many controls we are going to have let's consider if we consider the Json placeholder API so I will just get ID this will be my control so in form we have to create multiple controls so this ID is my control colon it will be form control round bracket right and here you can initialize whatever the value you need to initialize let's say I'm initializing it with zero right considering ID is a primary key comma second control second control will be [Music] Name colon new form control right so name property we initialize with empty so that single codes then whatever the property just like the object whatever the object you know that much controls you can create form control s bracket empty then let's see email just four field we are going to take for now new form control right so if you consider this is nothing but like your object what we used to create for template form normally our object will be user obj any curly bracket and this number of properties we create like this I'm just inform you like how it was in template form and how it is in reactive form right this was used we used to create in the template form now that thing got changed over in the reactive form like this we have to create a variable with which will have a data type of form group we can consider like user form user form is our form right then in the uh in this particular form we are creating multiple control so multiple controls nothing but this is one control this is second control this is third control and this is fourth control so this is how we have created our form along with some controls right so let me just copy this let's in component create form like below right so this is the second step First Step was in app model youit to add reactive for module Second Step was in in component.ts you need to create a form like this with whatever the control you need to create create then in your HTML let's design a simple form so whenever you are working with template form it is not mandatory you should create a form tag right but when you are working with reactive form it is mandatory that you should create a you should enclose your form in into the form tag right so we have to create form tag right now for this on this form tag we need to add form group name the name of our form so name of our form is user form so this will go over here right let's enclose that in the property binding so this is the third step so just compared to template forms some steps are extra here right so third step is ADD form name to form tag like below right so you need to create a form tag and you need to add form group name whatever the form group name you have created to the form group using property binding right then we can design a form so let's just design a basic form through call for label name we will need text box class oop class I'm adding right now when it was a template form we used to bind this particular elements with the NG model and particular object and that particular property but since it is a reactive form form we have already specified over here so now here we need to bind particular control name so that will be with form control name equal to double quotes and inside that we need to bind particular field means control name that is name what are the properties we have in the left side so name over here means in this user form I have a control with name just like this let me just copy paste usern name now second control will be username so we just have to copy this and paste it over here like third was email so let's copy paste it over here and this was email right so that's it so four step was to all your input you can bind the controls to all input element bind form control name with control name like below right so all the input element whatever the input element you have whether it can be text box drop down checkbox text area anything it can be right so whatever the controls you have created that you need to bind it over here like this right Next Step so form is done we need save and save button so row do call 6 inside that I will have a button just add a class BTN BTN Suess let's say let save user right now two things you can do first thing either you can write save event on the form or you can just normally write over here also like the Click event right this is one way let's create a function in I'm creating function on save user right so this function we can call on the button also over here like this or you can do the same thing on the form also so that will be form on submit is equal to our function name right so either you can create a uh submit event you can call it here also or here also but if you want to use this now you need to make this button as type submit then only that event will get triggered right whatever you need to do you can do like this okay so now let's remove this let's remove this now let's add a debugger in this function and let's see what data we get constant now when we submit we call our API right for API we need to send the object so we get the object from this form only means user form so let's say obj is equal to this dot userform dot value so if we get the value of this user form you will get the object like the object we used to get in the template form so let's save and check now okay button color is class was incorrect right so let's inspect now Jan 111 femail right let's send some D data now on click of the save user we have called that function so once I click right so you can see debugger is activated now if i h on this now user form. value you can see same object we are getting just like we used to get when we used to design the form with template now this you can pass to the API right so let's just quickly write the API call also so here let's create Constructor private HTTP colon HTTP client right now here this HTTP dopost URL and then object we need to pass object we have got from here in constant we have stored or directly you can pass this same thing over here also one and the same thing now for the Json plus order this will be URL just action method will be post do subscribe bracket round bracket result col any Arrow function alert user created right so let's save and check we should see a network call with the object right so let's try Jan Jan 111 email let's say Jan gmail.com let's click on save you can see we have got the debugger and in the object whatever the object uh whatever the object we have got from the pr is there and we are sending that to the API so we have API call is Success you can see in the r response this is the object we have sent in the response we have got idas 11 right so post API call is there right so this is how you design the uh reactive form but now this is just uh insert thing we have done in case of edit we just need a small thing change that I will explain but to edit we need to make the get AP call also get all user round bracket Cur bracket enter so just like this instead of post it will be gate and for gate we don't have to send the object let's store the data in users array and any right and this I will paste it over here this not user because edit will to get the edit functional first we need to show the data right so whatever the array we get I'm storing that into this and this function I will call in the Constructor since I have not implemented that NG on it and everything so I will just simply call the API call in the Constructor so on the page load I'm calling this function so that in users array I will get all the data so in container let's create row call six and here I will create a table just add a table ordered dad inside the TR th serial number three Fields only we will be showing name user name and email ID and email that's it then we will need T body and inside that TR will be there and we need to use for loop on This Ti so star NG for let user of our array name that is user array so now what number of TD we have that number of column we need to show so TD right we need the serial number so okay rather than getting index I will just print ID over here using interpolation user. ID whatever the data we get that only we need to show it over here so let's check a response name property we get then username email right one more column let's see if we are getting we are getting the data or not then we will Implement edit button right so you can see data we are getting Now call six was here right so again I will create a call six and put this form inside that so we will have table and the column table and the form in the same row right now so here I need to create one more th and that th name will be action and here I will create edit button edit right now on click of this edit we need to make an API call right so on edit now we need to pass user ID to this function so let's copy and paste it let's create this function so consider ing this you already know like how do we make the API call and everything that's why I'm going fast over here right so normal API call we have to make just API call will be this only but after that we need to pass the ID so that ID will be like this right and the data we will be getting we have to initialize this form again so I will copy this again now this is the edit part once we get the data for that particular ID we need to initialize that data in the form so I will just copy pasting this and put it inside this and now instead of this this. user form is equal to we don't need this because it is not initialization now so this do user form is equal to new form group and now instead of this whatever the initialization value we have did we need to bind whatever the response we get so rs. ID right like this instead of empty rs. name rs. username and r. email right in normal template form also what we used to do we used to store the response whatever we get from the API in the object so instead of that we are just initializing our form with the value we are getting right so let's save all and check if we on the click of edit we are able to get the data right so on the network let's click on Patricia record on click of edit you can see APA call is there with along that particular ID and we have got the particular object and that object is assigned in the form also and that is rendered over here let's click on linen right so this is how you should do then save and submit call the same thing right so in the reactive form while we do the insert we have to create the form right and while when we click on the edit we get the object so again we have to initialize so you just need to initialize like that instead of the static values you just in uh provide the values whatever you get from the API call this is the basic uh implementation of reactive form using form group right so this was one way now another way is using form Builder so form Builder is the service so let's go let's go to the second component so this was the second component now first way was using form group same like that you can uh you can create the reactive form using form Builder service also so let's create user form colon um group we have to create right then in Constructor you need to create an service instance of form Builder so form Builder poon for Builder right now in Constructor I'm initializing that so this do user form is equal to new not new so we are going to create using form Builder so this do formbuilder dot group we have to group the multiple controls right so round bracket curly bracket inside that same thing what we have did so ID new form control right just like this [Music] name new form control username col new form control remaining things are same whatever in the whatever we have did in the HTML right API call and everything same thing is there just the difference is let me open the previous one right so this is using form Builder service right and this was using form group same thing is there right if you say as performance both are same this is just like it uses the angular boiler P to design to initialize the form and we are creating new instance of the form along with some controls so no performance difference is there everything is same so these are the various implementation we had we can do using reactive form now the basic form is done now what about validation right so validation you can do after initialization you just need to add comma and square braet now validations are going to be multiple right so we don't do the validation on the HTML side we do we apply the validation on the dots only so that will be validators you need the import dot let's say you need to make it required let's say you need to add minimum length so do main length whatever the main length you need let's say 10 digit just like this you can add Min length max length pattern email whatever the things you know in the validation that all you can add over here right so this is the and then in the HTML also so let's say if you have added the validation like here so now we have to go to the HTML right now in in HTML also below this text box I will create a what do we say text danger class right and here I will add span now form First Property first NG if we do like if that controlly touch or not right so star NG if user form do controls right inside controls we have multiple controls so dot square bracket our control name control name is name right we have selected particular control from the form dot errors and now whatever the error you need to check sorry this this is for we are checking for touch or not right so dot touched right then in the span tag we show multiple errors like required mean length max length whatever so user form do controls our control name that is name then do errors do required right and here you can pass message like this is required just like this we have Min length also we have added right so instead of required it will be Min length so let's save and check we should see the validation right so on the page load you don't get to see any validation but once you click and click away why it is not visible user form. name let me just inspect what went wrong so D is there touch properties there so if you can see by default we don't get that division not there but once I click that D is there right but inside that this is not working so user form do controls name errors spelling mistake is there or what required let me just check this let's try to print the whole errors like what do we get over here with Json pipe then we will get to know like what property we get over there is coming null why it is coming null name property okay so you can see the mistake we have added the validation on the ID so this should be present over here that why that's why it was null now you will be able to see the validations working properly so you can see required is there but once I provide the value now error got changed that is main length so let's remove this now you can see minimum length is three let's save right so on the page load we don't see any validation but once user touched that text box this is required is coming but once user provided the value then second validation will come why main length is not coming again spelling mistake is there right so you can print that and then you can just copy paste the things you can see once I provide the 10 character that validation will go away right so this is how you do the validation in reactive form same like that just writing some syntax we in template form we create template variable but here we use form. control and name the remaining is same in template also we used to show error with error properties right so hope this video was helpful to you I will be coming with some more useful scenarios in angular and some mini project ideas also so please do like subscribe and like my videos

Channel: LEARNING PARTNER

Views: 1,702

Keywords: reactive form in angular, reactive form using formgroup, reactive form using formbuilder, reactive form, how to create reactive form, crud using reactive form, angular reactive form, angular reactive form using formbuilder, how to create reactive form using formbuilder, crud in angular, angular reactive form crud, angular crud, create reactive form in angular, create reactive form angular, angular project, angular 16, angular tutorials, angular 15, angular, angular 12

Id: dlNY-eQOZ5s

Length: 28min 59sec (1739 seconds)

Published: Thu Nov 02 2023