2
votes

Existe-t-il un moyen d'ajouter ou de supprimer une directive en utilisant une condition dans un cadre angulaire?

J'utilise le sélecteur de directive sur l'événement de clic qui donne asc et desc mais je veux supprimer cette directive alors que mon formulaire réactif est sale. appSortable est le sélecteur de directive

<div class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>


1 commentaires

4 Réponses :


0
votes

Ne pouvez-vous pas mettre à jour votre directive pour accepter une propriété activée, puis la définir sur l'état du formulaire?

[isEnabled]="!myForm.dirty"

Votre directive ne fait rien si cette valeur est fausse. p >


0 commentaires

2
votes

Pourquoi ne pas utiliser * ngIf dans votre modèle?

<div *ngIf="myForm.dirty" class="bank-name sort">
<div *ngIf="!myForm.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>


1 commentaires

en cas de clic, je dois vérifier que le formulaire est sale ou non, puis le modèle d'avertissement se produira si l'utilisateur Cliquez sur «OUI» comment stocker le tri précédent = (asc ou desc) et sortBy



0
votes

Avoir deux codes similaires ne convient que si le code est à 1 ligne. S'il s'étend sur plusieurs lignes, le code peut devenir trop moche trop tôt.

Vous pouvez avoir un paramètre d'entrée dans votre directive. Vous pouvez passer la valeur de form.dirty à la directive et appliquer la logique que vous souhaitez. Cela vous évite également de dupliquer le code.

Voir l'exemple ici

Edit: a rendu la solution plus générique, chaque composant peut avoir sa propre fonction et trier en conséquence.


0 commentaires

0
votes

Vous pouvez utiliser le code ci-dessous pour masquer votre contenu si le formulaire est sale

<div *ngIf="!YourFormName.dirty" class="bank-name sort" appSortable sortDirection="asc" (sorted)="onSortedBankName($event)" (click)="sortColumnBy(bankConstants.sortBy.name)"  #Sortable>


0 commentaires