forms - 在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，在我的 Controller 中进行验证，然后触发一个 ajax 请求，但是我的身份验证框架要求我实际提交表单并重定向浏览器。

Answer 1

您可以将其包装在另一个元素中:

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