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

概述我有以下表格： <form name="formuser" action='/signup' method='post' novalidate> <input type="text" name="firstname" ng-model="firstname" ng-class="{ 'has-error' : (formuser.firstname.$invalid && !formus 我有以下表格：

<form name="formuser" action='/signup' method='post' novalIDate>    <input type="text" name="firstname" ng-model="firstname" ng- 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请求,但我的身份验证框架要求我实际提交表单并重定向浏览器.

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

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

总结

以上是内存溢出为你收集整理的表单 – 在Angularjs中禁用按钮时如何允许ng-click全部内容，希望文章能够帮你解决表单 – 在Angularjs中禁用按钮时如何允许ng-click所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。