I have this form here
When I want to edit this, I can choose a region with mat-select.
And edit the input fields.
When I click on cancel, the form will reset and the input fields are resetted the way I want but the region keeps the value I choosed. I have no idea why.
What I want is, that I get the previous region. When the region was DE, then it should be reset to DE.
Here is my mat-form-field to select the region.
<mat-select [(ngModel)]="editedMarket.region" [placeholder]="selectedRegion">
<mat-option [value]="null">
none
</mat-option>
<mat-option
*ngFor="let region of marketRegions"
[value]="region">
{{ region }}
</mat-option>
</mat-select>
editedMarket.region is a String.
When clicking on the edit button, I call this function:
onEditButtonClick(entity: T) {
this.resetEditedEntity();
this.entityOnEdit = entity;
this.columns.forEach(editableColumn => {
this.editEntityForm.get(editableColumn.name).setValue(entity[editableColumn.name]);
});
this.startEditingEntity.emit(entity);
Object.values(this.editEntityForm.controls).forEach(control => control.updateValueAndValidity());
}
which will emit this function:
onStartEditingMarket(market: Market): void {
this.editedMarket = market;
}
The cancel button:
<button mat-icon-button (click)="onCancelButtonClick()">
<mat-icon>close</mat-icon>
</button>
onCancelButtonClick() {
this.resetEditedEntity();
this.cancelEditingEntity.emit();
}
which will emit an event and call this function:
onCancelEditingMarket(): void {
this.editedMarket = undefined;
}
I also try to reset() the form but it still doesn't work...


