PrimeNG puces p supprimer uniquement

Question

J'utilise p-chips de primeNG avec angulaire 2. https://www.primefaces.org/primeng/#/chips

Mes p-chips est remplie lors de la sélection la valeur d'une liste multi-sélection. Je voudrais désactiver l'ajout de données en écrivant dans les puces.

Mais je veux garder la possibilité de supprimer des valeurs.

Est-ce possible? Sinon connaissez-vous un autre outil qui peut le faire?

Answer 1

Aucune méthode intégrée pour ce faire. Vous pouvez probablement ajouter une propriété delete-only au composant pour qu'il fonctionne comme vous le souhaitez.

Answer 2

vous pouvez y parvenir en utilisant CSS:

/* +++++++ Prime NG CHIPS +++++++ */ 
.ui-chips > ul.ui-inputtext, 
.ui-chips > ul.ui-inputtext:focus { 
    border: none; 
    box-shadow: none; 
    background: none; 
} 
.ui-chips .ui-chips-input-token { 
    display: none; 
} 

ou SCSS:

/* +++++++ Prime NG CHIPS +++++++ */ 
.ui-chips { 
    > ul.ui-inputtext, 
    > ul.ui-inputtext:focus { 
    border: none; 
    box-shadow: none; 
    background: none; 
    } 
    .ui-chips-input-token { 
    display: none; 
    } 
} 

s'il vous plaît noter que ces règles CSS devraient être ajoutées à certains fichiers CSS/SCSS global (uncapsulated)

stackblitz: https://stackblitz.com/edit/angular-mugxwj?file=styles.css