javascript - AngularJS 表单 ng-attr

Question

当我的表单无效时，我试图禁用一个按钮:

我在没有任何帮助的情况下尝试了以下

<form name="someForm" id="someForm">    
   <input type="submit" ng-attr-disabled="{{someForm.$valid}}" />
</form>

和

   <input type="submit" ng-attr-disabled="someForm.$valid" />

它们都不起作用，我做错了什么吗？

我可以使用:

            <input type="submit" ng-show="someForm.$valid" />
            <input type="submit" ng-hide="someForm.$valid" disabled />

但这似乎是错误的:-(

我应该如何使用 ng-attr 指令访问表单并在表单无效时设置禁用属性？

Answer 1

你可以只使用 ng-disabled指令。

<input type="submit" ng-disabled="someForm.$valid" />

当你执行 ng-attr-disabled="{{someForm.$valid}}" 时会发生什么，它将放置属性 disabled="true" 或disabled="false" 这意味着 disabled 属性仍然存在，无论它是真还是假，它将始终禁用按钮。 disabled 属性(如果存在)将禁用输入，必须完全不存在才能启用它。 ng-disabled 属性清楚地处理了它。可以将属性 disabled 设置为 true/false 而不是属性 disabled。

您还需要为表单内的任何输入(不是按钮)添加 ng-model 和名称，以便将其添加到表单 Controller 。

演示

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app>
  <form name="someForm" novalidate>

    <input type="text" name="mod" ng-model="mod" required />
    <input type="submit" ng-disabled="someForm.$invalid" />
  </form>
</div>