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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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