есть ли альтернатива для ng-disabled в angular2?

145

Я использую angular2 для разработки, и мне было интересно, есть ли альтернатива для ng-disabled angular2.

Например код ниже в 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>

Просто хотел узнать, как мне добиться этой функциональности? какие-либо входы?

angular angular-directive Бхушан Гадекар
источник
15
[disabled] = "! nextLibAvailable" попробуйте это может помочь
Mayur

Ответы:

278

Чтобы установить disabledсвойство trueили falseиспользовать

<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>
Гюнтер Цохбауэр
источник
5
Работает только на <button>,(это правда?), Что разумно. В противном случае получите сообщение об ошибке (т. Е. При попытке связать с <a>) «Невозможно связать с« отключен », так как это не известное свойство« а »`
The Red Pea
4
Он работает на каждом элементе, который имеет disabledсвойство. См. Также stackoverflow.com/questions/35431188/angular
Günter Zöchbauer
70 
[attr.disabled]="valid == true ? true : null"

Вы должны использовать, nullчтобы удалить attr из HTML-элемента.

Роджер Гусмао
источник
3
Для угловых> 2.x это правильный путь с использованием [attr.disabled]
дол
12
attr.требуется только тогда, когда элемент не имеет disabledсвойства. Для таких элементов, как кнопки и элементы ввода, attr.это избыточно. Для элементов, которые не имеют disabledсвойства, привязка к которому имеет attr.disabledсмысл, только если вы обращаетесь к нему с помощью CSS, чтобы он выглядел как отключенный (указатель мыши, серые цвета, ...)
Günter Zöchbauer
Да, это лучший способ, когда некоторые элементы не имеют отключенного свойства по умолчанию.
Вирадж
Вы можете увидеть решение здесь - оно работает с этим атрибутом в ваших компонентах HTML [attr.aria-disabled]="myPropReflectingIfDisabled". Это добавит атрибут, aria-disabled="true"если myPropReflectingIfDisabledесть true.
Netsi1964
6

Вот решение, которое я использую с анулярным 6.

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

плюс выше приведенный ответ

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

не работает для меня, плюс следует помнить об использовании null, потому что он ожидает bool.

Анек Азам Хан
источник
[readonly] = "DateRelatedObject.bool_DatesEdit? true: false" работает с Angular 6+
Somedev
4

Для угловых версий 4+ вы можете попробовать

<input [readonly]="true" type="date" name="date" />
Кришнадас ПК
источник
0

Да Вы можете либо установить [disabled] = "true", либо, если это переключатель или флажок, вы можете просто использовать отключить

Для радио кнопки:

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

Для выпадающего списка:

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>
Прия Гупта
источник