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
la source
15
"! nextLibAvailable" [disabled] = essayer cela pourrait aider
Mayur

Réponses:

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
la 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
la 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
la 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
la 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
la source