I use an angular+springboot web application in which an object ( for this example- clinic object ) fetched from springboot in angular is not modified, and then is sent back to springboot, and some of its prperties's values for no apparent reason just become null, and others ( a boolean property get value of false, and integer properties get value of 0 ) get default values.
This is a table in which clinic objects are desplayed, and from which a modal to update a clinic is opened.
<table class="table">
<thead>
<tr>
<th scope="col" style="text-align:right;"></th>
<th scope="col" style="text-align:right;">State</th>
<th scope="col" style="text-align:right;">Foundation Year</th>
<th scope="col" style="text-align:right;">Supervisor</th>
<th scope="col" style="text-align:right;">Clinic Name</th>
</tr>
</thead>
<tbody>
<tr [ngClass]="{'not-active-clinic':!clinic.active}" *ngFor="let clinic of clinics">
<td style="text-align:right;">
<button class="btn-primary mr-1" (click)="openEditModal(editModal,clinic)"><i
class="fa fa-edit"></i></button>
<!--Edit Modal -->
<ng-template #editModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Clinic Edit</h4>
<button style="margin-left: 0;" type="button" class="close" aria-label="Close"
(click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form dir="rtl">
<div class="row">
<div class="col-3">
<label>
Clinic Name: </label>
</div>
<div class="col-9">
<input style="width: 100%;" type="text" name="clinicName"
[(ngModel)]="edittedClinic.clinicName">
</div>
</div>
<div class="row">
<div class="col-3">
<label>
Supervisor</label>
</div>
<div class="col-9">
<select (change)="onChange()" style="width: 100%;"
name="clinicalSupervisorId"
[(ngModel)]="edittedClinic.clinicalSupervisorId">
<option *ngFor="let s of supervisors" [value]="s.id">
{{s.firstName+' '+s.lastName}}
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-3">
<label>
description:</label>
</div>
<div class="col-9">
<textarea style="width: 100%;height:350px"
[(ngModel)]="edittedClinic.description" name="description">
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click');onEdit(clinic)">Edit</button>
</div>
</ng-template>
<button class="btn btn-sm btn-danger btn-delete-account"
(click)="openDeleteModal(deleteModal)">
<span class="spinner-border spinner-border-sm"><i
class="fa fa-trash-alt"></i></span>
</button>
<!--Delete Modal -->
</td>
<td style="text-align:right;">
<button (click)="onChangeClinicState(clinic)">
{{clinic.active?"Add To Archive":"Restore"}}</button>
</td>
<td style="text-align:right;">{{clinic.yearFounded}}</td>
<td style="text-align:right;">{{clinic.clinicalSupervisorId}}</td>
<td style="text-align:right;">{{clinic.clinicName}}</td>
</tr>
</tbody>
</table>
This the method in angular to fetch the edited object to send it to service in which there is the http call to send the clinic object to springboot:
onEdit(clinicToEdit:Clinic)
{
this.dashboardService.updateClinicDetails(this.edittedClinic).subscribe(
data=>{
clinicToEdit=Object.create(this.edittedClinic);
},
err=>{
}
)
}
This is the method in the service to send the http put call
updateClinicDetails(clinic:Clinic)
{
return this.http.put(BASE_URL +`/api/v1/clinic/${clinic.clinicName}`,clinic);
}
This is the API method in springboot to get the clinic object sent from angular.
@PutMapping(path = "{clinicName}")
public int updateClinicById(@PathVariable("clinicName") String clinicName, @RequestBody Clinic clinicToUpdate)
{
return clinicService.updateClinic(clinicName, clinicToUpdate);
}
This is the constructor of clinic object invoked in order to fetch the JSON sent to springboot from angular.
public Clinic(@JsonProperty("clinicName") String clinicName,
@JsonProperty("clinicalSupervisorId") int clinicalSupervisorId,
@JsonProperty("description") String description, @JsonProperty("yearFounded") int yearFounded,
@JsonProperty("active") boolean active)
{
this.clinicName = clinicName;
this.clinicalSupervisorId = clinicalSupervisorId;
this.yearFounded = yearFounded;
this.description = description;
this.active = active;
}
Now, the thing is when modified, those mentioned properties don't contain null values, or their default values, What is the explanation to this, and what's the best way to solve it?