Edit form in angular

they say is part 59 of Angela credit tutorial in this video well discus editing and updating data in Angela to set the expectations right we'll be updating data only on the client side well discuss persisting data to a database table in our upcoming videos when we implement the server-side service now to support editing and updating data instead of creating a brand-new form for that we are going to make use of this create employee form at the moment we are using this create employee form to create a new employee we are going to modify this to support both creating a new employee and editing and updating an existing employee at the moment to get to create employee component we use this path segment create notice within the URL we have that path segment create and we see the clean employee form and we using this create employee form to create a new employee now to support both creating and updating an existing employee I'm going to change this create path to edit for / : ID notice now this path has got a route parameter if this ID parameter value is 0 then we are going to use this form to create a new employee if it's anything else other than 0 then we are going to use this form to update an existing employee the next step is to update this create menu item this menu item is within our root component app component notice the menu item is right here at the moment we don't have any part that matches create we changed it to edit for / : ID so we need to provide a value for ID parameter now we are going to use this menu item to create a new employee and for the ID parameter we're going to supply a value of 0 so edit for / 0 let's save all our changes notice now when we click on the create menu item the path changes to edit for / 0 and we have an empty form to create a new employee now let's navigate to the list page when we click this edit button we want to edit this existing employee so let's wire up a click event handler the Edit button is in display employee component notice the button is right here let's wear a party game and handler let's name the method edit employee we don't have this method yet so let's create it within the component class when the edit button is clicked we want to navigate the user to edit for slash the ID of the employee that we are editing this code is going to be very similar to what we have already within the view employee method so let's make a copy of this method and then change the bits that are required the name of the method is edit employee and we want to navigate to edit path and we are getting the ID of the employee that we want to edit from the employee object that is coming into this component we don't need this very parameter so let's get rid of that let's save all our changes and then take a quick look at the browser notice now when we click the edit button the path in the URL is change it to edit for slash the ID of the employee that we are editing in this case ID 1 but we don't see that specific employee details on this form that's because at the moment we don't have the code implemented yet to read the load parameter and then retrieve that specific employee and bind it to this great employee form let's do that now so with no create employee component let's subscribe to the ID road parameter and then react accordingly to read route parameters we need angular's activated route service so let's inject it using the constructor let's name it underscore route and the cells that we want is activated route service next within ng on in its lifecycle hook let's subscribe to the route parameter they stored underscore route Dharam app dot subscribe they callback method that we specify as a parameter to the SUBSCRIBE method is going to get the parameter map as a parameter we can name it anything we want I'm going to call it parameter map and on the parameter map we can use the get method to get the ID route parameter value remember the name of the parameter that we are specified for the edit path within our route module file a buret module appears is ID so we have to specify that name right here and ID is a number so to convert that to a number let's use plus sign and then let's store it in a constant let's name the constant ID and then we are going to pass this ID to a method called get employee we don't have this method yet we'll create it in just a bit so this method is going to retrieve the employee with the specified ID now let's create this get employee method this is going to be a private method and it's going to have a parameter let's name it ID and this is of type number if this incoming ID parameter value is 0 then we are going to use this form to create a new employee so we are going to initialize the employee property with an employee object where all properties are set to null we already have that code right here so let's cut this from here and paste it right here now the important point to keep in mind is the view template is bound to this employee property and notice when the incoming ID is 0 we are initializing all the employee object properties to null or their default values so the form is displayed with the blank form fields so we can enter the data of a new employee that we want to create on the other hand if the incoming ID is not 0 then we want to use the employee service that's injected into this component and then retrieve that specific employee by ID so this dot employee property equals this dot unscrew employee service tour get employee and to this method we pass the incoming ID notice now on our form we see marked data because his employee ID is 1 but some of the fields here are not populated for example phone number is not populated that's fine because for phone number we don't have data but look at this contact preference we have data for contact preference that's not populated and gender is also not populated we'll fix that in just a bit but before that let's go to the list route and then try to edit another employee and see what happens we are now editing Mary notice you know we don't have email but the rest of the details are present when we click Edit we see some of the details but some of the details are missing notice again contact preference and gender so let's fix this now if we take a look at employee service where we have all our employees data notice Mary data is right here we have data for both these fields gender and contact preference gender is female contact preferences phone but if we look at our form notice both those fields are not populated that's because if we look at the view template notice within the view template we have those two radio buttons here male and female look at the value here for the radio buttons you know all letters are lowercase but if we look at the data within our employee service notice gender has got a capital letter F in female so because of that mismatch the respective radio buttons are not selected so let's fix the value here to include uppercase m and uppercase F here and the same is true for contact preference so we have the contact preference radio buttons here so let's include capital letter e for email and capital @a p for phone notice now both the fields contact preference and gender are populated as expected there is another small issue here if I select email of the contact preference and since we don't have a value for email of a required validation error should trigger but it's not working at the moment similarly if I select contact preferences phone and if we don't have a value for phone again it should trigger required validation error it's not working at the so let's see what's causing this first take a look at this phone on the field notice the required attribute is bound to this boolean expression if the contact preference value is phone then add the required attribute now notice within a value here we have a lowercase PE but here the value for phone radio button is capital at a P so because of that mismatch this required attribute is not added so let's change this to a capital letter P and let's do the same thing with our email field so again here required attribute is only added if the contact preference value is email let's save our changes and take a look at the browser notice now our dynamic required validation works as expected when we select phone and when we remove the phone number we have the validation error and when we put the phone number back the validation error disappears now let's go back to the components Lance the way we have implemented this else block causes a small issue when updating an existing employee first let's understand what that issue is by the moment we are editing Mary details let's change her name to Mary 1 and at this point let's navigate to the list route we get our can deactivate guard because the form is dirty so let's click ok we are on the list route and if you look at Mary name notice it is already updated to marry one so when we click Edit and if we look at her name it's already updated to Mary one without us explicitly clicking this Save button the employee data is automatically updated because this employee property is holding a reference to the employee object in the employee service and we know this employee property is bound to this form so when we change any field on this form the object that this property is pointing to is automatically updated so when we change name of employee Mary the change is automatically made its way into the employee object in the employee service because this property is holding a reference to that employee object to solve this we will have to copy the values of the employee object into another object and then assign that object as the value for this employee property and we do that by using object assign method so with this code we are now copying the values of the retrieved employee object into a new object right here and then assigning this object as the value for the employee property so now it's not holding a reference to the employee object in the employee service so the data should not be updated automatically notice this page is reloaded now let's change made his name to Mary to navigate to the list route click OK to discard changes notice Mary name is not automatically updated let's edit again notice the name is still Mary there is another small issue here when I select my contact preferences email we get email required validation error which is fine because we don't have a value for email field at this point I want to discard all these changes and then create a brand new employee so I click on create menu item so we get the candy activate alert which is fine when I click OK to discard all the changes that route changes to edit forward slash zero and I'm presented with a blank form so I can enter the details of the new employee that I want to create but what I don't like here is this validation error from our previous edit form when a user is presented with a blank form to create a new employee we also want to reset the validation errors to reset the form I'm going to use this create employee form property that we have so let's use this property and then call the reset method now let's quickly test effects first let's navigate to the list route edit one of the employee details let's change the contact preference to email you see the validation error now let's navigate to create a brand new employee click OK notice now we don't see previous validation next let's implement save functionality when the Save button on this form is cleared this is the method that is called notice save employee method is bound to in the submit event so when the same employee method is called we are copying all the properties of the object that this employee property is pointing to into another object and then we are assigning that object as the value for this property we're then passing that to the save method of our employee service now let's take a look at the save method now we have to modify the code in this method in such a way if the incoming employee object is a new employee then we want to add that employee to this list if the employee is an existing employee then we want to replace that employee within this list so the question now is how do we differentiate between a new employee and an existing employee well if we take a look at our create employee component notice for a new employee the ID property is set to now whereas for an existing employee ID property will have a value other than now so if an employee dot ID is now then we know it's a new employee and we want to push that employee into the array else we want to replace the existing employee first let's find the index of the existing employee object in this list employees array for that let's use fine index method given an employee object such that the ID of the employee object must be equal to the incoming employee object ID let's store the index in a constant I'm going to name it found index now all that is left to do is replace the employee object at the found index with the incoming employee object another important thing that we need to do is specify a value for this ID property of the new employee object that we are pushing into this employees array to compute a value for the Hidy property we will have to first identify what is the current maximum ID value add one to it and then assign it as the value there are several ways to find maximum ID value in this list employees array one way is by using reduce method as the name implies this reduce method reduces the array to a single value we provide another function as a parameter to this reduced function this provided function is executed for every element in the array from left to right and to this function we pass two employee objects let's call them a1 e2 and then we'll specify the logic on how to reduce this array of employees into a single value in our case a single employee object so here we're comparing ID property value or put the employee objects and if the ID value of e1 is greater than e2 then return e 1 else return e 2 so this function will be executed for every employee object in this list employees array from left to right after it completes execution we're going to get that employee object which has got the maximum Y value so let's retrieve the ID property value from that employee object and let's store it in a constant let's name the constant max ID finally before we push the employee object into the array let's set its ID value so the ID property value equals max ID plus 1 now let's test our create and edit scenarios first let's create a new employee notice we have our new employee Tom successfully created we have all his details gender date of birth contact preference etc captured correctly now let's try to edit this employee and see the ID value assigned to him notice the ID value in the URL it's four that's because within our employee service in the employees array we've got three employee objects and the maximum ID value is three so our save method has added one to that max ID value hence we got the ID value as four for this new employee object that we have just added now let's try to change these employee details and see if it works correctly now let's change email to Tom one at prism tech comm and name also to Tom one and let's change his contact preference to phone let's click Save the changes are saved and noticed name is updated to Tom one his contact preference his phone and his email is also changed to Tom one now another small issue that we have is within our thread employee component notice the panel title is hard-coded to create employee so whether we are creating a new employee or editing an existing employee the title is always displayed as create employee now we want to dynamically set this so I'm going to bind this to a property let's call the property panel title and with no component class let's create this property of type string next we need to set this property dynamically we know we'll be creating a new employee if the ID route parameter value is zero so let's set here the panel title to create employee if the route parameter value is not zero then we know we'll be editing an existing employee so in this case let's set the panel title to edit employee let's save our changes and quickly give it a test now one important point to keep in mind is all this data is saved in memory in the application this means any time the application is reloaded we lose all the changes notice we lost the newly added Tom employee object similarly any changes that we make to these existing employees we will again lose those changes when the application reloads that's because these changes are not persisted to a database table will discuss how to persist these changes to a database table in our upcoming videos now let's create a new employee notice the panel title is create employee let's edit an existing employee notice now the panel title is edit employee now let's launch browser developer tools and create a new employee notice when I click this show preview button without typing anything in the photo path field we get a 4 0 4 error that's because this is not a valid photo path and this image element is trying to render it it doesn't make any sense to display this show preview button if there is nothing typed in this photo path field so let's hide this button if there is nothing typed in this field to avoid these unnecessary 4 0 4 errors so within our create employee component view template we have a photo path field right here and the show preview button is right here now let's include NDF structural directive on this button we want to display this button only if the photo path property is not equal to an empty string and it must also should not be equal to now and let's include these two conditions on the image element that actually renders the photo as well notice now when the photo path field is empty we don't have that button displayed as soon as I start typing that's when we see the button when I type a valid path and when we click show preview we see the image as expected so there are three simple steps to modify create employee form to support both creating a new employee and update an existing employee the first step is to change the create route path to include a parameter notice we included an ID parameter we're going to use this parameter to determine if we are using the form to create a new employee or update an existing employee the next step is to subscribe to route parameter changes and react accordingly from our create employee component if the ID Road parameter value is 0 that means we are creating a new employee if it is any value of than 0 that means we are editing an existing employee finally modify our angular employee service to create or update an employee depending on whether the ID property value of the employee object is null or not that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 76,125

Keywords: angular edit table, edit form angular 2, angular 4 edit form, angular 5 form update, angular update array, angular update data, angular 2 insert update delete example, angular update object in array, angular update table data, angular 4 update table data, angular edit form example, edit in angular 4, angular update form example, angular 2 change data, angular 2 update data, angular 2 update form, angular array update

Id: pkTAFaR5LRM

Length: 23min 20sec (1400 seconds)

Published: Mon Jun 18 2018