¿Hay alguna alternativa para ng-disabled en angular2?

145

Estoy usando angular2 para el desarrollo y me preguntaba si hay alguna alternativa para ng-disabledangular2.

Por ej. El siguiente código 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>

Solo quería saber ¿Cómo puedo lograr esta funcionalidad? alguna entrada?

angular angular-directive Bhushan Gadekar
fuente
15
[disabled] = "! nextLibAvailable" intente esto podría ayudar
mayur

Respuestas:

278

Para establecer la disabledpropiedad trueo falseusar

<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
fuente
55
Solo funciona <button>,(¿es eso cierto?), Lo cual es razonable. De lo contrario, aparece el mensaje de error (es decir, cuando intenta vincularse a un <a>) `No se puede vincular a 'deshabilitado' ya que no es una propiedad conocida de 'a' '
The Red Pea
44
Funciona en cada elemento que tiene una disabledpropiedad. Ver también stackoverflow.com/questions/35431188/angular
Günter Zöchbauer el
70 
[attr.disabled]="valid == true ? true : null"

nullDebe usar para eliminar attr del elemento html.

Roger Gusmao
fuente
3
Para angular> 2.x esta es la forma correcta, utilizando [attr.disabled]
Dale
12
attr.solo se requiere cuando el elemento no tiene una disabledpropiedad. Para elementos como botones y elementos de entrada attr.es redundante. Para los elementos que no tienen una disabledpropiedad, un enlace attr.disabledsolo tiene sentido si lo direcciona con CSS para que parezca deshabilitado (puntero del mouse, colores grises, ...)
Günter Zöchbauer
Sí, esta es la mejor manera cuando algunos elementos no tienen la propiedad predeterminada deshabilitada.
Viraj
Puede ver una solución aquí : funciona con este atributo en sus componentes HTML [attr.aria-disabled]="myPropReflectingIfDisabled". Agregará un atributo aria-disabled="true"si myPropReflectingIfDisabledes así true.
Netsi1964
6

Aquí hay una solución que estoy usando con anular 6.

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

más arriba de la respuesta dada

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

no funcionó para mí y tenga en cuenta el uso de nulo porque espera bool.

Aneeq Azam Khan
fuente
[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" funciona con Angular 6+
somedev
4

Para versiones angulares 4+ puedes probar

<input [readonly]="true" type="date" name="date" />
Krishnadas PC
fuente
0

Sí, puede establecer [disabled] = "true" o si es un botón de opción o una casilla de verificación, simplemente puede usar desactivar

Para el botón de radio:

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

Para desplegable:

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