在angular2中有禁用ng的方法吗？

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

— 布山·加德卡（Bhushan Gadekar）
source

15

[disabled] =“！nextLibAvailable”尝试这样做可能会有所帮助

— Mayur，2016年

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>

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

5

仅适用于<button>,（是真的吗？），这是合理的。否则收到错误消息（例如，当尝试绑定到时<a>）`无法绑定到'disabled'，因为它不是'a'的已知属性

— Red Pea

4

它适用于具有disabled属性的每个元素。又见stackoverflow.com/questions/35431188/angular

— 君特Zöchbauer

69

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

您必须用于null从html元素中删除attr。

— 罗杰·古斯芒
source

3

对于angular> 2.x，这是使用[attr.disabled]的正确方法

— dale

12

attr.仅在元素没有disabled属性时才需要。对于像按钮和输入元素这样的元素attr.是多余的。对于那些没有元素disabled属性的绑定attr.disabled是只有当你通过CSS解决这个意义使它看起来像禁用（鼠标指针，灰色，...）

— 君特Zöchbauer

是的，当某些元素未禁用默认属性时，这是最好的方法。

— 维拉（Viraj）

您可以在此处看到一个解决方案-它可以在组件HTML中与此属性一起使用 [attr.aria-disabled]="myPropReflectingIfDisabled"。aria-disabled="true"如果myPropReflectingIfDisabled为，它将添加一个属性true。

— Netsi1964 '17

6

这是与anular 6一起使用的解决方案。

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

加上以上给出的答案

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

不适用于我，另外请注意使用null原因，因为它期望出现布尔值。

— 阿涅克·阿扎姆·汗（Aneeq Azam Khan）
source

[readonly] =“ DateRelatedObject.bool_DatesEdit？true：false”适用于Angular 6+

— somedev

4

对于有角度的4+版本，您可以尝试

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

— 克里斯纳达斯PC
source

0

是的，您可以设置[disabled] =“ true”，或者如果它是单选按钮或复选框，则可以简单地使用disable

对于单选按钮：

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

对于下拉菜单：

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

— 普里亚·古普塔（Priya Gupta）
source