есть ли альтернатива для 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>

— Прия Гупта
источник