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指令访问表单并设置disabled属性？

Answer 1

您可以使用ng-disabled指令。

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

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

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

<强>演示

<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>

AngularJS Form ng-attr

1 个答案: