y a-t-il une alternative pour ng-disabled dans angular2?

145

J'utilise angular2 pour le développement et je me demandais s'il y avait une alternative pour ng-disabledangular2.

Par ex. le code ci-dessous est en angularJS:

<button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

Je voulais juste savoir Comment puis-je obtenir cette fonctionnalité? des entrées?

angular angular-directive

— Bhushan Gadekar
source

15

"! nextLibAvailable" [disabled] = essayer cela pourrait aider

— Mayur

278

Pour définir la disabledpropriété trueou falseutiliser

<button [disabled]="!nextLibAvailable" (click)="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib"> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

— Günter Zöchbauer
source

5

Ne fonctionne que sur <button>,(est-ce vrai?), Ce qui est raisonnable. Sinon, obtenez le message d'erreur (c'est-à-dire lorsque vous essayez de vous lier à un <a>) `Impossible de se lier à 'désactivé' car ce n'est pas une propriété connue de 'a' '

— The Red Pea

4

Cela fonctionne sur chaque élément qui a une disabledpropriété. Voir aussi stackoverflow.com/questions/35431188/angular

— Günter Zöchbauer

70

[attr.disabled]="valid == true ? true : null"

Vous devez utiliser nullpour supprimer attr de l'élément html.

— Roger Gusmao
source

3

Pour angulaire> 2.x, c'est la bonne façon d'utiliser [attr.disabled]

— dale

12

attr.n'est requis que lorsque l'élément n'a pas de disabledpropriété. Pour les éléments comme les boutons et les éléments d'entrée, il attr.est redondant. Pour les éléments qui n'ont pas de disabledpropriété, une liaison attr.disabledn'a de sens que si vous l'adressez par CSS pour qu'elle ressemble à désactivée (pointeur de la souris, couleurs grises, ...)

— Günter Zöchbauer

Oui, c'est le meilleur moyen lorsque certains éléments n'ont pas de propriété désactivée par défaut.

— Viraj

Vous pouvez voir une solution ici - cela fonctionne avec cet attribut dans vos composants HTML [attr.aria-disabled]="myPropReflectingIfDisabled". Il ajoutera un attribut aria-disabled="true"si myPropReflectingIfDisabledc'est true.

— Netsi1964

6

Voici une solution que j'utilise avec Anular 6.

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false"

plus réponse donnée ci-dessus

[attr.disabled]="valid == true ? true : null"

n'a pas fonctionné pour moi et soyez conscient de l'utilisation de null car il attend un bool.

— Aneeq Azam Khan
source

[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" fonctionne avec Angular 6+

— somedev

4

Pour les versions angulaires 4+ , vous pouvez essayer

<input [readonly]="true" type="date" name="date" />

— PC Krishnadas
source

0

Oui Vous pouvez soit définir [disabled] = "true", soit s'il s'agit d'un bouton radio ou d'une case à cocher, vous pouvez simplement utiliser désactiver

Pour le bouton radio:

<md-radio-button disabled>Select color</md-radio-button>

Pour la liste déroulante:

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>

— Priya Gupta
source