首页 文章

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

提问于
浏览 次
8

我有以下表格：

<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请求，但我的身份验证框架要求我实际提交表单并重定向浏览器 .

forms angularjs validation angularjs-ng-click

4 回答

  • 2

    好吧，而不是制造黑客，最干净的解决方案是启用按钮，只需使用简单的指令处理提交：

    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，您可以根据表单状态按预期设置按钮的样式 .

    回复于
  • 6

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

    回复于
  • 2

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

    <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;
}
    回复于
  • 3

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

    有关详细信息，请参阅this post .

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

    回复于

相关问题