Angular 5 ngModel changes the value in UI without saving it - html

Question

In my form I have a select with a bind variable. If I try to change and save the value it works fine but if I try to change the value in my modal and instead of save it, I close the modal (so I do not save the value) in my UI I see the changed value and obviously in my DB the value is not changed.
component.html
<select class="form-control m-input" id="type" formControlName="type"
[ngClass]="{ 'is-invalid': submitted && formcontrols.type.errors }" name="type"
(change)="changeType($event, newParameter.type)"
[(ngModel)]="newParameter.type">
<option [ngValue]="'STRUCT'">STRUCT</option>
<option [ngValue]="'NUM'">NUM</option>
<option [ngValue]="'BOOLEAN'">BOOLEAN</option>
<option [ngValue]="'DATE'">DATE</option>
</select>
component.ts
changeType(event, type){
type= this.createParameterForm.get('type').value;
if(type==="NUM"){
this.initNUMControlsForm();
}
else if(type ==="STRUCT"){
this.initStructControlsForm();
}
else{
this.initControlsForm();
}
}
How can I avoid this problem?

Answer 1

usually you need to create another instance of your object at beginning and modify that object by your form. You can create the new object by const newObj = {...originalObj} or const newObj = JSON.parse(JSON.stringify(originalObj))
if user tries to save, pass the new object to save function and after success save, copy it back to original object
if user cancels, do nothing because your original object is not changed