Topic: Disabling an item in a select doesn't work
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
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;
})
}
}
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: 7.4.0
- Device: pc
- Browser: chrome
- OS: windows 7
- Provided sample code: No
- Provided link: No
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.