Question

我有一个设置了网址action的表单。当form.$invalid为true （或form.$valid为false）时，我想将表单设为不提交到网址并在UI中显示无效的表单错误。

在我的特殊情况下，我正在使用一个为我提供Angular Controller的框架，我无法在其上添加/修改函数！我只需要对模板进行更改就可以。

这是我到目前为止所拥有的（简化）

<form novalidate name="form" method="post" ng-attr-action="{{model.loginUrl}}" ng-submit="return form.$valid"> <div class="form-group" ng-class="{'has-danger' : form.$submitted && form.username.$invalid}"> <input type="text" name="username" required class="form-control" ng-model="model.username"> <div class="form-control-feedback" ng-if="form.$submitted && form.username.$invalid"> A username is required! </div> </div> <button type="submit">Sign In</button> </form>

我在网上看到的许多内容都说要做
之类的事情
ng-submit="form.$valid && model.myCustomSubmitFn()"

但是没有使用网址格式action，我无法使用此框架添加自定义函数

Answer 1

Angular在ng-submit的上下文中传递$event。所以你打电话给$event.preventDefault()。您的ng-submit会更改为

<form novalidate
      name="form"
      ng-attr-action="{{model.loginUrl}}"
      ng-submit="form.$invalid && $event.preventDefault();form.$submitted=true;"
      >

请参阅plunker。

Answer 2

以下是对此问题不会工作的回答 - 我只是在这里离开，所以没有人会将其作为解决方案来解决

在这种情况下，ngDisabled可能会为你工作吗？

<button type="submit" ng-disabled="form.$invalid">Sign In</button>

Answer 3

这肯定是一个棘手的情况，因为您只有编辑模板的权限。我没有看到＆＃34;棱角分明的＆＃34;能够编辑控制器来解决问题的方法。幸运的是，这可以通过一些vanilla JavaScript在模板中解决。

尝试在您的按钮中添加onclick事件处理程序，如果您的表单输入与验证条件不符，则会阻止表单提交。

<button type="submit" onclick="if(form.username.value.length < 1) { event.preventDefault(); }">Sign In</button>

我对此解决方案并不感到骄傲，如果您的表单中有多个输入，它肯定会变脏，但它看起来是您不幸情况的唯一解决办法。

Answer 4

反应表格

如果你想在你的被动形式的HTML中声明这个，你可以简单地做这样的事情：......

<form [formGroup]="formGroupVar" (ngSubmit)="formGroupVar.valid ? submitFunc() : null" novalidate>...</form>

所以你正在做的是让(ngSubmit)成为一个三元运算符，比较将是你的formGroupVar.valid，当为真时，你将执行你的submitFunc（），否则为null。

注意：没有理由不在你的TypeScript文件中执行此操作，将HTML保持为“干净”是有意义的，但这并不意味着它不可能！

无效时使用表单操作URL阻止Angular表单提交

4 个答案:

反应表格