角度提交表单答案

【问题标题】：Angular onsubmit for form角度提交表单
【发布时间】：2014-08-27 16:21:03
【问题描述】：

我需要表单上的onsubmit 属性的功能——即当我调用这个onsubmit 函数时，它必须返回truthy 才能发布表单。但是我想用一个角度函数调用来做到这一点，沿着：

<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" onsubmit="{{FormSubmit.validate()}}" action="{{FormSubmit.SUBMIT_URL}}" novalidate>

然而，上面给出了关于在onsubmit 上使用插值的错误。我尝试输入ng-submit，但它不起作用，因为我设置的action 属性已被覆盖。

【问题讨论】：

你看过文档吗？这是一个很好的起点：docs.angularjs.org/api/ng/directive/ngSubmit
是的，我有。 “此外，它会阻止默认操作（对于表单，这意味着将请求发送到服务器并重新加载当前页面），但前提是表单不包含 action...”。所以这似乎不是解决方案。

标签： angularjs forms

【解决方案1】：

不确定它是否对你仍然有效，但我一直在解决类似的问题。

以下答案使我走上了正轨：https://stackoverflow.com/a/17769240/1581069

所以，总结一下所需的步骤：

你应该在你的onsubmit 中调用纯 javascript（无角的），比如（请注意：如果你在那儿返回 false => 表单将不会被提交）：
```
<form id="form-submit-canvas" ... name="fooForm" onsubmit="return externalValidate();" ...
```
并实现转角的方法，如：
```
function externalValidate(){
  return angular.element($("#form-submit-canvas")).scope().validate();
}
```
- 您的validate() 方法应该只是您之前提到的一个（在您的角度控制器中实现）。
- 和externalValidate() 应该在任何特定于角度的组件之外实现。

此外，请确保从 validate() 方法返回正确的结果（以防止表单提交）。可能是这样的：

$scope.validate = function () {
  // TODO implement whatever magic you need prior to submission

  return $scope.fooForm.$valid;
}

【讨论】：

【解决方案2】：

尝试使用ng-submit 属性而不是onsubmit。相关建议：Angular 不支持许多属性。你应该找到 ng- 等价于你想要用来让 Angular 对它们做出正确反应的属性。

例子：

<form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" ng-submit="validate()" novalidate>
    ...
    <input type="submit" name="submit" value="Submit" />
</form>

其中ng-submit 中的validate() 方法是在您的$scope 上声明的方法。

这里有相关教程：AngularJS Tutorial (ng-submit)

【讨论】：

【解决方案3】：

我知道这可以帮助寻找如何在 Angular 中使用提交表单操作的人。我正在使用 Angular 13，这就是我们捕获提交操作的方式：

<form [formGroup]="formData" (onSubmit)="onSubmit()">
    <button type="submit">Click here!</button>
</form>

The reference is here

【讨论】：