Select not showing default item value label after reset if n


Topic: Select not showing default item value label after reset if no changes

Lumpenstein asked 2 days ago

Expected behavior

After resetting the formGroup, I expect the select controls to show me the label of the selected key, independant from if I changed a value or not.

Actual behavior

If I reset the formgroup, without having changed the value of the default selected option on the select, the label is not show anymore, even though the key is correctly selected if I check in Angular devtools or the debugger.

Resources (screenshots, code snippets etc.)

// HTML
     <mdb-form-control>
       <mdb-select id="test" name="test" formControlName="test">
         <mdb-option value="test" mdbTooltip="test">test</mdb-option>
         <mdb-option value="test2" mdbTooltip="test2">test2</mdb-option>
       </mdb-select>
       <label mdbLabel class="form-label" for="test" i18n>test select</label>
     </mdb-form-control>

// Default Filters
const defaultFilters: Filters = {
  test: "test2"
};

// Init formGroup with initial values:
this.filtersGroup = new FormGroup({
  test: new FormControl(defaultFilters.test)
});

// Reset filters to default
    this.filtersGroup.reset(defaultFilters);
OR 
    this.filtersGroup = new FormGroup({
      test: new FormControl(defaultFilters.test)
    });
OR 
    this.filtersGroup.patchValue({
      test: "test2"
    });

If I change the select manually from "test2" to "test" and then reset, it works as expected,but when I do not change the selected value, but just reset, the label for the selected value is no longer shown, even though the value of the formGroup is set correctly.

EDIT:

I found what caused this weird behavior, I had my form reset button call the reset function of the form:

<form [formGroup]="filtersGroup" (ngSubmit)="applyFilters()" (reset)="clearFilters()">
<button type="reset" class="btn btn-danger" i18n>Reset</button>

adter cahnging it to a simple click event, the reset to default works as expected:

<button type="button" (click)="clearFilters()" class="btn btn-danger" i18n>Reset</button>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 7.1.0
  • Device: PC
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags