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:

ng g component owner/owner-update --skipTests

update structure - Angular Put Actions

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

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:
<button type="button" id="update" class="btn btn-success" (click)="redirectToUpdatePage(owner.id)">Update</button>

public redirectToUpdatePage = (id) => { 
    const 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, let’s add the wrappers code in the owner-update.component.html file:

<div class="container-fluid">
    <form [formGroup]="ownerForm" autocomplete="off" novalidate (ngSubmit)="updateOwner(ownerForm.value)">
        <div class="form-horizontal card card-body bg-light mb-2 mt-2">

        </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:

<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 tag, we are going to add the code for displaying the buttons:

<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:
  <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 business logic for the owner-update.component file.

Handling Angular PUT Actions in the Component

Modify the owner-update.component.ts file:

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:

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 the exact id from the server.

Inside this function, we execute 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 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. We use DatePipe to transform the date format.

Letā€™s add additional functions below the getOwnerById function:

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:

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.