Disabling an item in a select doesn't work


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

herve pro asked 5 years 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 5 years 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 5 years 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 5 years 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.

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: 7.4.0
  • Device: pc
  • Browser: chrome
  • OS: windows 7
  • Provided sample code: No
  • Provided link: No