使用 ng-disabled 启用/禁用按钮答案

【问题标题】：Using ng-disabled to enable/disable button使用 ng-disabled 启用/禁用按钮
【发布时间】：2016-08-04 11:13:02
【问题描述】：

我在表单的提交按钮中使用了 ng-disabled。当我填写该字段时， inputForm.$valid 应该是 true 并且 ng-enable 应该得到这个 true 值，从而启用按钮。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="">

    <form name="inputForm" >
        <div>
            <label>Name</label>
            <input type="text" name="name" required />
        </div>
        <div>
            <label>Email</label>
            <input type="text" name="email" required/>
        </div>

        <button type="submit" ng-disabled="{{inputForm.$valid}}">
            Submit
        </button>
    </form>

    {{inputForm.$valid}}
    {{inputForm.$invalid}}
    {{inputForm.$dirty}}
    {{inputForm.$pristine}}
</body>
</html>

但是即使输入了字段，按钮也没有启用。我做错了什么？

【问题讨论】：

标签： angularjs

【解决方案1】：

你应该使用：

ng-disabled="inputForm.$invalid"

为了在表单无效时禁用表单。请注意，您不要将无效属性放在括号中。

完整的<form>代码：

<form name="inputForm" >
    <div>
        <label>Name</label>
        <input type="text" name="name" required />
    </div>
    <div>
        <label>Email</label>
        <input type="text" name="email" required/>
    </div>

    <button type="submit" ng-disabled="inputForm.$invalid">
        Submit
    </button>
</form>

【讨论】：

如果我有两个条件 ng-disabled="inputForm.$invalid && !myController.input" 怎么办。这对我不起作用。你有什么解决办法吗
@PrashanthDamam 在这种情况下，您可能想提出一个新问题。

【解决方案2】：

将ng-disabled="inputForm.$valid 更改为ng-disabled="inputForm.$invalid 或ng-disabled="!inputForm.$valid，当表单有效时，您将禁用按钮

【讨论】：

希望在表单有效时禁用按钮。这只是一个了解工作的模拟