Topic: MDB Select - disabled option functionality not working
itsupport@arrkgroup.com free asked 5 years ago
MDB Select - disabled option functionality not working
Damian Gemza staff answered 5 years ago
Dear itsupport,
As it's described in the documentation, if you're updating the select array dynamically, you have to use the spread operator [..., ].
Please check the below code:
.html:
<div class="row">
<div class="col-md-6 mx-auto my-5">
<mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
<button mdbBtn color="primary" (click)="disable()">Disable item</button>
</div>
</div>
.ts:
export class AppComponent implements OnInit{
optionsSelect: Array<any>;
ngOnInit() {
this.optionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Disabled option', disabled: true },
];
this.optionsSelect[2].disabled = true;
}
disable() {
this.optionsSelect[0].disabled = true;
this.optionsSelect = [...this.optionsSelect, this.optionsSelect];
}
}
Best Regards,
Damian
itsupport@arrkgroup.com free answered 5 years ago
Well, I am surprised you say that because I have been able to achieve that.
It works properly meaning the option becomes disabled when you initialize the data with disabled=true.However, I am not able to achieve that behavior dynamically.
e.g. when you change the disable property of an option on any click event, it does not become disabled.
this.disOptionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Disabled option', disabled: true },
];
click() {
this.disOptionsSelect[0].disabled = true;
}
Damian Gemza staff answered 5 years ago
Dear itsupport,
Where did you find the approach with disabled: true in Select options?
There's no such possibility in our mdb-select component to disable an option in select's dropdown.
Best Regards,
Damian
itsupport@arrkgroup.com free answered 5 years ago
I want to disable option of select (which is not working)
<div class="col-md-6">
<mdb-select [options]="disOptionsSelect" placeholder="Choose your option" label="Example label"></mdb-select>
this.disOptionsSelect = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' } ,
{ value: '3', label: 'Disabled option', disabled: true } ,
];
Damian Gemza staff answered 5 years ago
Dear itsupport@arrkgroup.com
The [disabled]
option works on mdb-select
component. The below code shows how you should use it.
<mdb-select [disabled]="true" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
Please check our Select documentation.
Best Regards, Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.1
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No