In this post, we are going to update the owner entity by creating a form for the update action and by sending the PUT request towards our server.

Without further ado, let’s dive right into it.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

The source code is available at GitHub .NET Core, Angular and MySQL. Part 14 – Source Code

This post is divided into several sections:

Folder Structure and Routing

Prior to any update action, we need to create our component files.

So, let’s create them by using the Angular CLI command which is going to create all the files and import the created OwnerUpdate component in the owner.module.ts file:

UpdateOwner folder structure Angular PUT Actions

We need to modify the owner.module.ts file:

Now we are going to change our owner-list.component.html file and the owner-list.component.ts file, to enable navigation between the OwnerList and the OwnerUpdate components:

Handling Angular PUT Actions in the HTML File

Our owner-update.component.html file is going to be almost the same as the HTML file for creating the owner. Since that’s the case, let’s start with the implementation.

Firstly, add the wrappers code in the owner-update.component.html file:

We already know from the previous post that the formGroup is going to contain all of the controls inside its value. This value is exactly what we send as a parameter inside the updateOwner action.

Secondly, we are going to create our controls between the form-horizontal div tag:

Every input element contains a formControlName attribute which we are going to use in the component file for the validation. Furthermore, the validateControl and the hasError functions are the custom functions that will help us display error messages (still the same thing that we did in the CreateOwner component).

Below the last form-group, add the code for displaying the buttons:

Finally, below the form tag, let’s add our custom modal components:

Excellent.

Now we have our HTML file and it is time to implement a business logic for the owner-update.component file.

Handling Angular PUT Actions in the Component

Modify the owner-update.component.ts file:

This is the basic setup for this component. We are creating our properties and injecting all the services we need inside this component.

Let’s add this code, below the constructor:

In the ngOnInit function, we instantiate the ownerForm with all the form controls and add the validation rules. Then we call the getOwnerById function to fetch the owner with exact id from the server.

Inside this function, we execute the familiar actions. Pulling the id from the url, sending the PUT request and processing the response whether it is success or error response.

One thing to pay attention to is the converting the dateOfBirthvalue from the format with hours, minutes and seconds, to the format we expect inside our input control. With the JQuery function, we place that value in the input field.  Notice that in this example using the date pipe is not restricted only to HTML files. But to make it work inside a component, we need to import the DatePipe pipe and inject it inside the constructor. We also need to import the DatePipe inside the app.module.ts file and to place it inside the “providers” array.

Let’s add additional functions below the getOwnerById function:

These are the familiar functions for validating the input fields, patching the value in the ownerForm property and redirecting to the OwnerList component.

Finally, we need to execute the update action by adding the code right below the redirectToOwnerList function:

That’s it.

Give it a try and make some updates. Try to create success responses and error responses from the server to test the modal components out as well. After that, you can check if the form validation works.

Conclusion

By reading this post you have learned:

  • How to create HTML part of the update action
  • The way to patch values from the server into the form group
  • How to send the PUT request to the server

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, we are going to write the delete part of the project, and slowly wrap the coding part of the series up.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.