在Angularjs中禁用按钮时如何允许ng-click

Question

我有以下表格：

<form name="formuser" action='/signup' method='post' novalidate>

    <input type="text" name="firstname" ng-model="firstname" ng-class="{ 'has-error' : (formuser.firstname.$invalid && !formuser.firstname.$pristine) || hasSubmitted}" required />

    <button type="submit" ng-disabled="formuser.$invalid" ng-click="hasSubmitted=true">Submit</button>
</form>

我正在尝试将“has-error”类添加到在用户输入内容或在输入仍处于原始状态时点击提交按钮后无效的输入字段。我已将 ng-disabled 添加到提交按钮以禁用表单提交，但我仍然希望 ng-click 触发以更改 hasSubmitted 范围。问题是按钮上的 ng-disable 也禁用了 ng-click。

我知道我总是可以在表单上使用 ng-submit，在我的控制器中进行验证，然后触发 ajax 请求，但我的身份验证框架要求我实际提交表单并重定向浏览器。

Answer 1

不要将输入设置为disabled，而是将其设置为readonly。这将允许 ng-clicks 继续运行。

Answer 2

将button 替换为div。即使 div 被禁用，ng-click 也会被触发。

更多详情请见this post。

顺便说一句，您需要在 div 上设置按钮样式。祝你好运。

Answer 3

好吧，最干净的解决方案是启用按钮并使用简单指令处理提交，而不是进行黑客攻击：

angular.module('common', []).directive('preventSubmit', function () {
    return {
        restrict: 'A',
        scope: {
            preventSubmit: '='
        },
        link: function (scope, element) {
            element.bind('submit', function(e) {
                if (scope.preventSubmit) {
                    e.preventDefault();
                }
            });
        }
    }
});

所以它绑定到提交事件，如果表单无效，它会阻止表单提交。如果你不使用动作属性，Angular 会自动处理它，你可以处理它，但在指定动作和正常提交的情况下，这个指令可能非常有用。

在标记中：

<form name="formuser" action='/signup' method='post' 
      novalidate prevent-submit="formuser.$invalid">
  ...
  <button type="submit" ng-click="hasSubmitted=true">Submit</button>
</form>

使用 ng-style 或 ng-class，您可以根据表单状态按预期设置按钮样式。

Answer 4

你可以将它包装在另一个元素中：

<span ng-click="hasSubmitted=true">
  <button type="submit" ng-class="{noclick:formuser.$invalid}" ng-disabled="formuser.$invalid">Submit</button>
</span>

CSS：

.noclick {
  pointer-events: none;
}