Is there any way to disable adding of chips(primeng) but should be deletable in angular 2

Question

Hi i am trying to make the chips input ineditable.I am taking the data of objects from one of the components and using the key of the data to be out as chips label.

This is my html code

<div class="inputDiv" *ngFor="let k of key">
  <div class="inlineclass">
      <span class="title">{{k}}</span>
          <p-chips [(ngModel)]="filterInput[k]" ></p-chips>
  </div>
</div>

This is my component from where i am taking my data

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'itc-upc-itc-component-filter',
templateUrl: './itc-component-filter.component.html',
styleUrls: ['./itc-component-filter.component.scss']
})
export class ItcComponentFilterComponent implements OnInit {
filterInput= { 'size': ['1T', '2T', '3T'], 'status': [ 'in progress','complete', 'pending']};
key= Object.keys(this.filterInput);
constructor() { }

ngOnInit() {
}

}

I have tried disabled property of ng primes chips property

<p-chips [(ngModel)]="filterInput[k]" disabled="true"></p-chips>

Is there any way that i can make this input uneditable but at the same time should be able to delete the chip

Answer 1

You should listen to the keyboard events where only backspace and delete keys should be allowed. That way you can remove but not add characters.

HTML:

  <span *ngIf="filterInput[k]" class="title">{{k}}</span>
  <p-chips (keydown)="onChange($event)" [(ngModel)]="filterInput[k]" ></p-chips>

Typescript

   onChange(event){
       if (!(event.keyCode == 8 || event.keyCode == 46)){
           return false
       }

   }

DEMO