existe alguma alternativa para ng-disabled em angular2?

145

Eu estou usando angular2 para o desenvolvimento e queria saber se existe alguma alternativa para ng-disabledem angular2.

Por ex. o código abaixo está em 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>

Só queria saber como posso obter essa funcionalidade? alguma entrada?

angular angular-directive

— Bhushan Gadekar
fonte

15

[disabled] = "! nextLibAvailable" tente isso pode ajudar

— mayur '11 /

278

Para definir a disabledpropriedade trueou 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
fonte

5

Só funciona <button>,(isso é verdade?), O que é razoável. Caso <a>contrário, receba a mensagem de erro (ou seja, quando tentar vincular a um ) `` Não é possível vincular a 'desativado', pois não é uma propriedade conhecida de 'a' ''

— The Red Pea

4

Ele funciona em todos os elementos que possuem uma disabledpropriedade. Veja também stackoverflow.com/questions/35431188/angular

— Günter Zöchbauer

69

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

Você precisa usar nullpara remover attr do elemento html.

— Roger Gusmao
fonte

3

Para angular> 2.x esta é a maneira correta usando [attr.disabled]

— dale

12

attr.é necessário apenas quando o elemento não possui uma disabledpropriedade Para elementos como botões e elementos de entrada attr.é redundante. Para elementos que não têm a disabledpropriedade de uma ligação a attr.disabledsó faz sentido se você abordá-la por CSS para torná-lo parecido com deficiência (ponteiro do mouse, cores cinzentas, ...)

— Günter Zöchbauer

Sim, é a melhor maneira de alguns elementos não desabilitarem o padrão de propriedade.

— Viraj

Você pode ver uma solução aqui - ela funciona com esse atributo no HTML de seus componentes [attr.aria-disabled]="myPropReflectingIfDisabled". Ele adicionará um atributo aria-disabled="true"se myPropReflectingIfDisabledfor true.

— Netsi1964 /

6

Aqui está uma solução que estou usando com o anular 6.

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

mais acima dada resposta

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

não funcionou para mim, além de estar ciente de usar a causa nula, pois está esperando bool.

— Aneeq Azam Khan
fonte

[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" funciona com o Angular 6+

— somedev 12/11/19

4

Para versões angulares de 4+, você pode tentar

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

— Krishnadas PC
fonte

0

Sim Você pode definir [disabled] = "true" ou, se for um botão de opção ou uma caixa de seleção, basta usar o recurso desativar

Para botão de opção:

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

Para o menu suspenso:

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

— Priya Gupta
fonte