Disabling an item in a select doesn't work

web
mobile

Topic: Disabling an item in a select doesn't work

herve pro asked 2 weeks ago

Hello

I try to dynamically change the disabled value of some items of a select component following the value of another component.

When I disable the items in the init it's ok, but when i dynamically change the disabled value in the option list, the select component is not updated.

Thank you


Arkadiusz Idzikowski staff commented 2 weeks ago

How exactly do you update the disabled items state? In Angular if you want to change something in the option list, you need to create new object in order to trigger change detection. We explained that in the select documentation:

https://mdbootstrap.com/docs/angular/forms/select/#update-options

MDB select is a pro component and according to our system, you use free version. Please provide us the number of your order or registered email so we can fix that. You can send it to a.idzikowski@mdbootstrap.com


herve pro commented 2 weeks ago

I have sent to you by mail the info needed.

In angular I use the following command to update :

this.optionEnvironnementsCible[i].disabled = true;

In the ngInit it works, but not when called within a function triggered by a ngModelChange event.


Arkadiusz Idzikowski staff answered 2 weeks ago

Thank you for the confirmation, we added 'pro' label to your account.

That's because Angular only checks if an array reference has changed. If you add new option or update parameter of existing option, the change detection won't be triggered. Here is an example:

HTML:

<div class="row">
  <div class="col-md-6">
    <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
  </div>
</div>

TS:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  optionsSelect = [
    { value: '1', label: 'Option 1', disabled: false },
    { value: '2', label: 'Option 2', disabled: false },
    { value: '3', label: 'Option 3', disabled: false },
  ];

  ngOnInit() {
    setTimeout(() => {
      this.updateDisabledState(); // nothing happens here
      this.optionsSelect = [...this.optionsSelect] // array reference change, Angular will trigger change detection for options input
    }, 3000);
  }

  updateDisabledState() {
    this.optionsSelect.forEach(option => {
      option.disabled = true;
    })
  }
}

Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.4.0
  • Device: pc
  • Browser: chrome
  • OS: windows 7
  • Provided sample code: No
  • Provided link: No