¿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

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