Select preselected value on template-driven forms Angular


Topic: Select preselected value on template-driven forms Angular

ARcode pro asked 2 years ago

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.


Arkadiusz Idzikowski staff answered 2 years ago

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


bitjuice pro answered 2 years ago

Hi,

I have the same problem.

My code works fine with 9.3.1 version

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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