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.
For the previous part check out: Creating Angular client side – Form Validation and Create Actions
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
- Handling Angular PUT Actions in the HTML File
- Handling Angular PUT Actions in the Component
- Conclusion
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:
1 | ng g component owner/owner-update |
We need to modify the owner.module.ts file:
1 2 3 4 5 | RouterModule.forChild([ { path: 'list', component: OwnerListComponent }, { path: 'details/:id', component: OwnerDetailsComponent }, { path: 'create', component: OwnerCreateComponent }, { path: 'update/:id', component: OwnerUpdateComponent} |
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:
1 | <button type="button" id="update" class="btn btn-success" (click)="redirectToUpdatePage(owner.id)">Update</button> |
1 2 3 4 | public redirectToUpdatePage(id){ let updateUrl: string = `/owner/update/${id}`; this.router.navigate([updateUrl]); } |
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:
1 2 3 4 5 6 7 8 | <div class="container-fluid"> <form [formGroup]="ownerForm" autocomplete="off" novalidate (ngSubmit)="updateOwner(ownerForm.value)"> <div class="form-horizontal well"> </div> </form> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <div class="form-group"> <label for="name" class="control-label col-md-2">Name of owner: </label> <div class="col-md-5"> <input type="text" formControlName="name" id="name" class="form-control" /> </div> <div class="col-md-5"> <em *ngIf="validateControl('name') && hasError('name', 'required')">Name is required</em> <em *ngIf="validateControl('name') && hasError('name', 'maxlength')">Maximum allowed length is 60 characters.</em> </div> </div> <div class="form-group"> <label for="dateOfBirth" class="control-label col-md-2">Date of birth: </label> <div class="col-md-5"> <input type="text" formControlName="dateOfBirth" id="dateOfBirth" class="form-control" appDatepicker (change)="executeDatePicker($event)" readonly /> </div> <div class="col-md-5"> <em *ngIf="validateControl('dateOfBirth') && hasError('dateOfBirth', 'required')">Date of birth is required</em> </div> </div> <div class="form-group"> <label for="address" class="control-label col-md-2">Address: </label> <div class="col-md-5"> <input type="text" formControlName="address" id="address" class="form-control" /> </div> <div class="col-md-5"> <em *ngIf="validateControl('address') && hasError('address', 'required')">Address is required</em> <em *ngIf="validateControl('address') && hasError('address', 'maxlength')">Maximum allowed length is 100 characters.</em> </div> </div> |
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:
1 2 3 4 5 6 7 8 9 | <br><br> <div class="form-group"> <div class="col-md-offset-5 col-md-1"> <button type="submit" class="btn btn-info" [disabled]="!ownerForm.valid">Update</button> </div> <div class="col-md-1"> <button type="button" class="btn btn-danger" (click)="redirectToOwnerList()">Cancel</button> </div> </div> |
Finally, below the form tag, let’s add our custom modal components:
1 2 3 4 5 6 7 8 | <app-success-modal [modalHeaderText]="'Success message'" [modalBodyText]="'Action completed successfully'" [okButtonText]="'OK'" (redirectOnOK)="redirectToOwnerList()"></app-success-modal> <app-error-modal [modalHeaderText]="'Error message'" [modalBodyText]="errorMessage" [okButtonText]="'OK'"></app-error-modal> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { ErrorHandlerService } from './../../shared/services/error-handler.service'; import { RepositoryService } from './../../shared/services/repository.service'; import { Router, ActivatedRoute } from '@angular/router'; import { Owner } from './../../_interfaces/owner.model'; import { DatePipe } from '@angular/common'; @Component({ selector: 'app-owner-update', templateUrl: './owner-update.component.html', styleUrls: ['./owner-update.component.css'] }) export class OwnerUpdateComponent implements OnInit { public errorMessage: string = ''; public owner: Owner; public ownerForm: FormGroup; constructor(private repository: RepositoryService, private errorHandler: ErrorHandlerService, private router: Router, private activeRoute: ActivatedRoute, private datePipe: DatePipe) { } } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | ngOnInit() { this.ownerForm = new FormGroup({ name: new FormControl('', [Validators.required, Validators.maxLength(60)]), dateOfBirth: new FormControl('', [Validators.required]), address: new FormControl('', [Validators.required, Validators.maxLength(100)]) }); this.getOwnerById(); } private getOwnerById() { let ownerId: string = this.activeRoute.snapshot.params['id']; let ownerByIdUrl: string = `api/owner/${ownerId}`; this.repository.getData(ownerByIdUrl) .subscribe(res => { this.owner = res as Owner; this.ownerForm.patchValue(this.owner); $('#dateOfBirth').val(this.datePipe.transform(this.owner.dateOfBirth, 'MM/dd/yyyy')); }, (error) => { this.errorHandler.handleError(error); this.errorMessage = this.errorHandler.errorMessage; }) } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | public validateControl(controlName: string) { if (this.ownerForm.controls[controlName].invalid && this.ownerForm.controls[controlName].touched) return true; return false; } public hasError(controlName: string, errorName: string) { if (this.ownerForm.controls[controlName].hasError(errorName)) return true; return false; } public executeDatePicker(event) { this.ownerForm.patchValue({ 'dateOfBirth': event }); } public redirectToOwnerList(){ this.router.navigate(['/owner/list']); } |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | public updateOwner(ownerFormValue) { if (this.ownerForm.valid) { this.executeOwnerUpdate(ownerFormValue); } } private executeOwnerUpdate(ownerFormValue) { this.owner.name = ownerFormValue.name; this.owner.dateOfBirth = ownerFormValue.dateOfBirth; this.owner.address = ownerFormValue.address; let apiUrl = `api/owner/${this.owner.id}`; this.repository.update(apiUrl, this.owner) .subscribe(res => { $('#successModal').modal(); }, (error => { this.errorHandler.handleError(error); this.errorMessage = this.errorHandler.errorMessage; }) ) } |
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.
