Angular 10 Tutorial #62 - Reactive Forms - Set Form Values | Angular 10 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 10 full tutorial series for absolute beginners we are continuing to learn about reactive forms and in today's episode we will learn how to set the values for the form controls this is part 62 of the angular 10 complete tutorial playlist i have plan around 100 tutorials for you in this particular series with detailed explanation and live practical examples the playlist link is in the description box below make sure you check it out so that you learn and master angular 10 in detail all right so so following are the topics that i have already covered in this particular series so make sure that you check out all the previous episodes and let me know if you have any doubts i'll be happy to help you or if you get stuck let me know i'll be happy to help you again all right so today is the 62nd episode today we are learning how to set values for our reactive forms a quick note of introduction to our viewers who are joining us new what are reactive forms reactive forms is one of the ways that we can create forms in angular application reactive forms allows us to have better control since most of the logic and control all the all the logic all the form design is done in the component controller right in the component class we use form group and form control those are the two main things that we have learned so far and in the last episode i introduce you to the concept of form builder to work with reactive forms we'll need reactive forms module that's the most important one because without which it won't work make sure you check out the last three episodes that's where i've covered the basics and showed you how to get started with reactive forms in angular application so remember three things um a lot of people get scared by the reactive forms but don't get scared remember these three important things form control form group and form builder if you understand these three things i think the form reactive forms itself is pretty cool and pretty easy to learn alrighty so how do you set values in reactive forms is what we are going to learn today okay so there are two ways that you can do okay so we can set the entire form value right and assign values on the go when you are creating the form that's one of the technique the other technique is using um by creating an object of the form and then using a method called set value right so these are the two two ways that you can set the value in reactive forms now where where do you find these use cases in angular application right so let's say for example if you are doing a edit functionality right so what happens is an edit you have to retrieve the data and set the data already right let me show you an example for example if let's say this screen if i refresh it's empty by default right but if it's an edit screen you want the values to be populated right when you launch the page or ngon in it so that's where you will need to set the values that's one of the use cases i can think of right away so let's learn how to set values so like i said there are two ways to do one is the entire form the other is using the set value i'll show you both ways let's go to component so this is our form right this is where we are creating the new form controls so just assign the value the first parameter of form control is the value right so i'll say loan name is personal loan right so remember friends always that the first parameter the first parameter param of the form control is the value so whatever you pass right that value will be displayed in the form okay so loan type oh let's make it here some meaningful names so we'll start giving some meaningful name to our form i'll say okay and description this is for lamp okay so some description save it and now you would see that when you go to your form the values are set right so see this that your values are now set that's because we have used the form and we have assigned the values on load so right when you are creating the form you have assigned the values here and that's why when you load the form it's reflecting directly right so this is one of the way right this is one of the way that you can assign the value to the form right right when you are initializing the form you can assign the values as well the other way so i'll comment this off just so it's for your reference right and then copy this again now instead of assigning it here so this is a better approach so when you have a complicated form which has multiple logical things based on some conditions etc etc it means it makes sense that you do something like this so you can create an instance and say new loan so here i'm creating a loan object right so what this does is this will take the exactly same parameters as this right so here i'll say so here you will create that form object which will have all the all the fields right so what i have done here is i have created an object right which looks like which has the all the attributes all the elements of the form remember now this is where a lot of people make mistake right i'll show you that mistake also don't worry i will not only show you working i'll also show you where it will not work right so now you'll say this dot form dot set value set value and pass this object right so see now this is another way of setting another way of setting values form right so this is one way that i showed you right direct way of setting the form value at form creation right so you're creating the form and you're assigning the value right there only that's way number one that's the first technique to set the value alternatively you can create an object of this form right i am not assigning it here instead i am creating an object and then i am saying this dot form dot set value lets see the output see now ah just so that you get a difference i'm going to make it um say gold loan right just so that you see the difference so you see here now it says colon so this is way number two so which way is correct there is no right or wrong okay there is no right or wrong it depends right um there is no right or wrong way sometimes usually what happens is your forms are too complicated it doesn't like here if you see the form is pretty simple but usually if you are using a form builder it will be very complicated so i i encourage people to use this technique right right all i n um i will say encourage you to use set value method but but there is a trick here which is the set value requires all the requires data slash values for all the fields or keys these are like key value right for this is the keys so i can say fields or slash keys okay if you don't give you will see error if you don't pass value you will see errors now let me show you that errors okay so what i'm doing i'm saying this is my form right so this is my form so now i'm going to delete one of the key which is required right since we are using set value we need to provide all the all the keys but now i am not providing intentionally to show you that it's an error so see it is not showing data if you go to console.log you would see error must supply a value for form control with name loan description which means whenever you're using set value this is mandatory to use okay so that's mandatory remember this notes that there is no right or wrong way to do but i encourage people to kind of you know use this set value but remember that whenever you do that the set value requires all the fields values okay if you don't pass we'll see errors right otherwise it's pretty simple take the form set the values or you can create an object and use set value right refer to this ppt nodes for your reference you can set the entire form here or you can use only the using set value right so these are the two ways you can set values in your reactive forms try it out let me know if you have any doubts right there is one more way which is called patch value i will explain that later or let me just cover it right here since we are anyway covering it here setting the value right so let me do that right here so the other way is using patch value right now let me cover this right here okay so look here take a look now patch value is similar to set value okay the only difference the only difference is you do not have to do not have to pass all keys slash fields right so here i told you that whenever we use set value we have to pass all the keys and values right but if you don't want to do that you can use patch value right now what does patch value do use patch value now what it does is you don't have to pass all keys like slash values right only selected key slash fields data can be set right now let me show you that so i'm going to comment this here for real quick now you see i'm using patch value so i'm going to delete the loan description if we did this in set value it gave us error now i'm going to show you that it works with patch value see there is no error because i am setting only two values which is for loan name and loan type and since i am using patch you do not have to pass all the keys and fields that's why there is no error but if you don't do patch value and you do set value you will see an error here now okay so there are two and i'm using set value let's save it now we should see error see because you have to pass loan description for set value you have to pass all the values if you don't want you can use patch value right all right so that was three ways uh setting the value on the go using the form second set value and the third is using the patch value method right so these are the three ways you can set values in reactive forms go ahead try it out you have this template ppt for your reference also make sure that you go pause my code see what i'm doing follow step by step and you should be able to get it if you still have some issues let me know i am right here to help you in the next episode we will learn about reactive forms reading form values right that's very very important because once you set the value you should be able to read the form values as well we'll see that in the next episode if you like my tutorials if you like my work please do consider buying me a coffee at buy me a coffee.com arc tutorials please do like share subscribe to my channel comment let me know how you are finding it if you have any feedback please do let me know i'm always open to positive feedback thank you so much for joining see you in the next episode

Channel: ARC Tutorials

Views: 4,627

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, reactive forms example angular, angular reactive form

Id: p4i0BTNTVFg

Length: 13min 58sec (838 seconds)

Published: Wed Feb 24 2021