How to reset the value of mat-option?

Viewed 27

I have this form here

enter image description here

When I want to edit this, I can choose a region with mat-select. And edit the input fields.

enter image description here

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.

enter image description here

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...

1 Answers

You can do somoething like

onCancelEditingMarket(market: Market): void {
this.editedMarket = market;
}
Related