Disable selected options in ng-multiselect-dropdown

673 views Asked by At

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

Array values

UI view

I used this link as a reference to my code -> Stackblitz reference

0

There are 0 answers