Topic: Select preselected value on template-driven forms Angular
Expected behavior Show pre-selected option according to the variable binding via ngModel on mdb-select-2
Actual behavior The pre-selected value on the mdb-select-2 element is not shown. It appears as if no value is selected. If you click and select a value manually, then it works properly. It's just the initial view. It can be that I'm defining the binding variable asyncronously and the select element doesn't update properly, but on version 9.3.1 it worked properly.
I can confirm that there is a problem with template-driven forms in this case. We added some changes in order to correctly update the form control value dynamically, but it looks like with ngModel the value is cleared when it's initialized too early. We need to make some additional checks to find the cause of the problem.
As a workaround for now, please try to defer the initialization of the select value:
HTML:
<mdb-select-2 [(ngModel)]="selected"></mdb-select-2>
TS:
selected: any = null;
ngOnInit() {
Promise.resolve().then(() => {
this.selected = '1';
});
}
or switch to reactive forms:
HTML:
<mdb-select-2 [formControl]="select"></mdb-select-2>
TS:
select = new FormControl('1');
TheShoosh pro commented 4 years ago
Hi guys, Any idea when this will be fixed? Should I be watching for a new release (9.4.1?) or will you post an update on this thread?
Grzegorz Bujański staff commented 4 years ago
We will fix it as soon as possible. Always releasing a new version, we provide a changelog. Once this is fixed, this information will appear there.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: Computer
- Browser: Firefox
- OS: Windows
- Provided sample code: No
- Provided link: No