Angular setvalue and patchvalue methods

this is part 7 of angular 6 tutorial in this video well discus how to update HTML elements on a form with new data first let's understand why do we need to update HTML elements on a form with new data let's say we're using this form to edit an existing employee details for us to be able to edit an existing employee details we must first retrieve that existing employee details from a server and then populate these controls on the form with that retrieved data this can be very easily achieved using set value method now if we take a look at this abstract control class provided by angular it has this method set value now we know both form group and form control classes inherit from this base class abstractinterface' this means on both the form Group instance and from control instance we can use set value method so here is what we want to do when we click this load data button we want to retrieve the existing data and then populate these form controls that that existing data so first let's include the required HTML for this load data button in our create employee component view template let's include another button in our panel footer let's make a copy of the Save button and then change the bits that are required this is not a submit button so that type is going to be button and the text on the button is low data let's save our changes and take a look at the browser notice both the buttons are attached to each other to give some space between these buttons let's place them inside a bootstrap button toolbar to create a button toolbar all we need to do is grab both of these buttons in another development and then on this wrapping they've used the bootstrap BTN - toolbar CSS class notice now we have some space between the buttons when the slow data button is clicked we want to call a method within our component class so let's bind to its click event let's call the method on load data click we don't have this method in our component class so let's create it let's place it after this ng on in it lifecycle hook this method is not going to return anything so the return type is void so what do we want to do when we click this load data button we want to set value for all these form controls and we know all these phone controls are present in a form group called employee form form group so on this form Group instance we are going to invoke set value method and then pass value for each form control within this form group first let's specify a value for this full name form control let's set its value to presume technologies next email and then the nested form group skills to indicate that we have a nested form group here we include another pair of curly braces and then specify values for these three form controls within this skills nested form group so let's specify values for skill name experience in years and proficiency notice I have set the value for proficiency as beginner so that means when we click this load data button this beginner radio button should be selected so let's save all our changes and take a look at the browser notice now when we click this load data button all the phone controls are populated with data as expected at the moment employee data is hard-coded within this method but we can very easily call a server-side service retrieve an existing employee details and then populate these form controls so to update all controls on a form we use set value method but what if we want to update only a subset of form controls now let's say we only want to update full name and email but not the skill related fields that is skill named experience in years and proficiency can we still use set value method for that the answer is no we can't we use patch value method for that so we use patch value to update a subset of form controls now let's try to use set value instead and see what happens notice we are still using the set value method now let's comment these three skill related fields let's launch Pro C developer tools and then click this load data button notice we have an error must supply a value for form control with named skills so we cannot use set value method to update a subset of form controls we use patch value instead so instead of using set value here let's use patch value notice now when we click this load data button full name and email form controls are populated without any errors now can we use patch value method to update all form controls the answer is yes let's actually verify that let's uncomment these killed related fields and notice we are still using patch value so let's save our changes and take a look at the browser notice now when we click load data button all the form controls are updated so can be used patch value to update all the form controls yes we can use patch value to either update all the form controls are only a subset of form controls in either cases patch value method succeeds without any error set value on the other hand can only be used to update all the form controls you cannot use it to update a subset of form controls if you try to you'll get an error so set value is very useful when we want to update all the form controls if we accidentally miss a value for a form control set value fails with an error so we know we are missing something patch value on the other hand silently fails without any error so you may not realize you have missed something especially when you have a very large form group so in short you set value to update all form controls and patch value to update a subset of form controls thank you for watching and have a great day

Channel: kudvenkat

Views: 72,714

Keywords: angular 2 setvalue vs patchvalue, angular setvalue vs patchvalue, angular setvalue example, angular formgroup setvalue example, angular setvalue formcontrol, angular form setvalue vs patchvalue, angular formcontrol setvalue not working, angular 4 reactive form patchvalue, angular reactive form patchvalue, angular patchvalue nested form, angular form builder patch value, angular formgroup patch value, patch value in angular 6, patch value in angular 2, angular patchvalue example

Id: BRdhAPozNlI

Length: 6min 55sec (415 seconds)

Published: Wed Sep 26 2018