ng-multiselect-dropdown - programmatically clear selected items not visually working

Question

I am using ng-multiselect-dropdown when clicking the deselect option within the object itself the dropdown clears the selected items (visually and variable

When programmatically clearing the selectedItems the variable array itself is cleared but the selected items within the visual portion are still selected. If you were to then click within the object the values would no longer be available as a selection but visually the object does not clear.

I've tried a few options to clear I'll show here below. I've also tried to put it into a form and then manually clearing the control.In any scenario I've tried when not deselectingAll from the dropdown itself the visual portion remains cached and the selectedItems is empty.

Form:

    <form [formGroup]="multiselect" (ngSubmit)="onSubmit()">
<div>
  <ng-multiselect-dropdown [placeholder]=""
                           [settings]="settings"
                           [data]="propertiesCharUnique"
                           (onSelect)="onItemSelect($event)"
                           (onSelectAll)="onSelectAll($event)"
                           (onDeSelect)="onDeSelect($event)"
                           (onDeSelectAll)="onDeSelectAll($event)"
                           formControlName="multi"
                           [(ngModel)]="selectedItems"
                   
                           >
  </ng-multiselect-dropdown>

  <input type="submit" value="Load Targets" />

</div>

 @ViewChild('multiselect') multiSelect: any;
  multiselect = this.formBuilder.group({

  });

public reset(){
    this.multiselect.get("multi")?.setValue([]);
    this.multiselect.get("multi")?.reset()
    this.selectedItems = [];
}
 

Answer 1

I removed the dropdown from the form and now ngModel binds properly.

<div>
<ng-multiselect-dropdown
                          [placeholder]="'Click here to select'"
                          [settings]="settings"
                          [data]="propertiesCharUnique"
                          [(ngModel)]="selectedItems"
                          (onSelect)="onItemSelect($event)"
                          (onSelectAll)="onSelectAll($event)"
                          (onDeSelect)="onDeSelect($event)"
                          (onDeSelectAll)="onDeSelectAll($event)" >
</ng-multiselect-dropdown>

<input type="submit" (ngSubmit)="onSubmit()" value="Load Targets" />
</div>