Angular表单的onsubmit方法

Question

我需要表单的onsubmit属性所具有的功能，即当我调用此onsubmit函数时，必须返回真值才能提交表单。但是，我希望使用类似以下方式的angular函数调用来实现：

<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属性被覆盖，所以不起作用。

- Zambezi

---

你看过文档了吗？那是一个很好的开始：https://docs.angularjs.org/api/ng/directive/ngSubmit - catalyst294

是的，我有。此外，它还可以防止默认操作（对于表单来说，这意味着发送请求到服务器并重新加载当前页面），但仅当表单不包含“action”时才能生效... 所以这似乎不是解决方案。 - Zambezi

Answer 1

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

以下答案将我带到了正确的轨道：https://dev59.com/IGkv5IYBdhLWcg3wlR31#17769240

因此，总结所需步骤：

1. you should call pure javascript (angular-free one) in your onsubmit, like (please note: if you return false there => form won't be submited):

   <form id="form-submit-canvas" ... name="fooForm" onsubmit="return externalValidate();" ...
   

2. And implement the the method to hand-over to angular, like:

   function externalValidate(){
     return angular.element($("#form-submit-canvas")).scope().validate();
   }
   

   • where your validate() method should be just one you referred to previously (implemented in your angular controller).
   • and externalValidate() should be implemented outside of any angular-specific component.

3. Moreover make sure sure to return correct result from the validate() method (to prevent form submission). Maybe something like:

   $scope.validate = function () {
     // TODO implement whatever magic you need prior to submission
   
     return $scope.fooForm.$valid;
   }
   

- Peter Butkovic

Answer 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教程（ng-submit）

- Kody

Answer 3

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

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

The reference is here

- Denner Antonio Portuguez Villa

---

如果表单元素具有“action”属性怎么办？我想要发布到该URL并在成功时得到通知。但是当我引入Angular表单时，似乎忽略了“action”？ - PAX

Answer 4

使用 onsubmit="return angular.element(this).scope().validate();" 来使用 Angular 验证函数。

    <form id="form-submit-canvas" autocomplete="on" enctype="multipart/form-data" accept-charset="UTF-8" method="POST" onsubmit="return angular.element(this).scope().validate();" >
    ...
    <input type="submit" name="submit" value="Submit" />
</form>

- M.Asad Hashmi