List used for the nf-multiselect-dropdown :
children: any = [{
id: "Son",
label: 'Son',
isDisabled: false
}, {
id: "Daughter",
label: 'Daughter',
isDisabled: false
}, {
id: "None",
label: 'None',
isDisabled: false
}];
Dropdown settings :
this.dropdownSettingsChildren = {
singleSelection: false,
idField: 'id',
textField: 'label',
selectAllText: 'Select All',
unSelectAllText: 'Unselect All',
itemsShowLimit: 1,
allowSearchFilter: true,
enableCheckAll: false,
};
Logic : When selected the 'None' option, it should make the fields 'isDisabled' as true
onChildrenOptionsSelect(event: any) {
if (event.id.includes('None')) {
for (let ele of this.children) {
if (!(ele.id.includes('None'))) {
ele.isDisabled = true;
}
}
}
this.onChildrenOptionsSelectOperation();
}
onChildrenOptionsDeSelect(event: any) {
if (event.id.includes('None')) {
for (let ele of this.children) {
if (!(event.id.includes('None'))) {
ele.isDisabled = false;
}
}
}
this.onChildrenOptionsSelectOperation();
}
HTML code ->
<ng-multiselect-dropdown class="width-120"
[placeholder]="'Select'" ngDefaultControl
[settings]="dropdownSettingsChildren" [data]="children"
[(ngModel)]="psHistory.maritalStatus.children"
name="dummyname"
(onSelectAll)="onChildrenOptionsSelectAll($event)"
(onDeSelectAll)="onChildrenOptionsSelectAll()"
(onSelect)="onChildrenOptionsSelect($event)"
(onDeSelect)="onChildrenOptionsDeSelect($event)">
</ng-multiselect-dropdown>
When checked the array, the values are properly reflecting but the options in ng-multiselect-dropdown are not disabled
I'd like to reflect the disabled fields on UI as well
I used this link as a reference to my code -> Stackblitz reference