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 /

Respostas:

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