While using ng-select remove item on condition-CodePudding

<div >
                                <ng-select 
                                [multiple]="true"
                                class= "custom-list"
                                formControlName="name"
                                placeholder="Please select"
                                [readonly]="isReadOnly"
                                [items]="catList"
                                bindLabel="name"
                                required="true"
                                (change)="changeFn($event)"
                                [clearable]='false'
                                >
                                <ng-template ng-option-tmp let-item="item" let-index="index" value="item">
                                    {{item?.name}}
                                </ng-template> 
                                </ng-select>                        
                            </div>

I want to remove an item using the above cross icon with each item only on condition. How can we get an event or on click so that when I click on cross icon the item do not get removed from an input until we get a response of true?

CodePudding user response：

This solution is not ideal because it's kind of redundant. But I will listen when city is removed. If on some condition city is not allowed to be removed we quickly add it back to selectedCity[] - it's not a good solution because we're not preventing removal and selectedCity[] items index change may cause order changes on the template.

If we want to prevent remove action we would have to get deeper into the inner working of this library. Glancing over the docs no such default behaviour is available to disable or prevent removing the chip.

@Component({
  selector: 'my-app',
  template: `
        <h1>Don't allow to remove item on condition</h1>
        <label>Your first ng-select</label>
        <ng-select [items]="cities"
                   bindLabel="name"
                   [multiple]="true"
                   (remove)="onRemove($event)"
                   placeholder="Select city"
                   [clearable]="false"
                   [(ngModel)]="selectedCity">
        </ng-select>
`,
})
export class AppComponent {
  selectedCity = [];

  constructor() {}

  someCondition = [1, 2, 3];

  onRemove(event: any) {
    console.log(event, this.selectedCity);
    if (this.someCondition.some((condition) => condition == event.value.id)) {
      console.log('adding back');
      this.selectedCity.push(event.value);
      this.selectedCity = [...this.selectedCity];
    }
  }

  cities = [
    { id: 1, name: 'Vilnius' },
    { id: 2, name: 'Kaunas' },
    { id: 3, name: 'Pavilnys', disabled: true },
    { id: 4, name: 'Pabradė' },
    { id: 5, name: 'Klaipėda' },
  ];
}

Here is a working example: https://stackblitz.com/edit/ng-select-example-pfxvpq?file=app/app.component.ts