c'è qualche alternativa a ng-disabled in angular2?

145

Sto usando angular2 per lo sviluppo e mi chiedevo se ci fosse qualche alternativa ng-disabledin angular2.

Per es. il codice seguente è in 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>

Volevo solo sapere Come posso ottenere questa funzionalità? qualche input?

angular angular-directive

— Bhushan Gadekar
fonte

15

"! nextLibAvailable" [disattivato] = provare questo potrebbe aiutare

— mayur

278

Per impostare la disabledproprietà su trueo falseutilizzare

<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
fonte

5

Funziona solo su <button>,(è vero?), Il che è ragionevole. Altrimenti viene visualizzato il messaggio di errore (ovvero quando si tenta di associare a un <a>) `Impossibile eseguire il collegamento a 'disabilitato' poiché non è una proprietà nota di 'a'`

— The Red Pea,

4

Funziona su ogni elemento che ha una disabledproprietà. Vedi anche stackoverflow.com/questions/35431188/angular

— Günter Zöchbauer

70

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

Devi usare nullper rimuovere attr dall'elemento html.

— Roger Gusmao
fonte

3

Per angolare> 2.x questo è il modo corretto usando [attr.disabled]

— dale

12

attr.è richiesto solo quando l'elemento non ha una disabledproprietà. Per elementi come pulsanti ed elementi di input attr.è ridondante. Per gli elementi che non hanno una disabledproprietà a cui attr.disabledè vincolata un'associazione è significativo solo se la indirizzi da CSS per renderla disabilitata (puntatore del mouse, colori grigi, ...)

— Günter Zöchbauer

Sì, questo è il modo migliore quando alcuni degli elementi non hanno disabilitato le proprietà predefinite.

— Viraj,

Puoi vedere una soluzione qui : funziona con questo attributo nell'HTML dei tuoi componenti [attr.aria-disabled]="myPropReflectingIfDisabled". Aggiungerà un attributo aria-disabled="true"se lo myPropReflectingIfDisabledè true.

— Netsi1964,

6

Ecco una soluzione che sto usando con anular 6.

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

più sopra data risposta

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

non ha funzionato per me, inoltre sii consapevole dell'utilizzo di null perché si aspetta il bool.

— Aneeq Azam Khan
fonte

[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" funziona con Angular 6+

— somedev,

4

Per le versioni angolari 4+ puoi provare

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

— Krishnadas PC
fonte

0

Sì Puoi impostare [disabled] = "true" o se si tratta di un pulsante di opzione o di una casella di controllo, puoi semplicemente utilizzare disabilita

Per il pulsante di opzione:

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

Per il menu a discesa:

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

— Priya Gupta
fonte