Angular onsubmit for form

Question

我需要一个表单的onsubmit属性的功能-即当我调用这个onsubmit函数时，它必须返回truthy才能使表单post。然而，我想用一个角度函数调用来实现这一点，就像下面这样：

<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属性已被覆盖。

Answer 1

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

下面的回答让我找到了正确的方向：https://stackoverflow.com/a/17769240/1581069

因此，总结一下所需的步骤：

1. 你应该在你的onsubmit中调用纯javascript (angular-free的)，=> (请注意:如果你返回false那里

form将不会被提交)：

1. 并实现方法来移交给angular，比如：

函数externalValidate(){ 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.

​

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

$scope.validate = function () { // TODO在提交前实现所需的任何魔术返回$scope.fooForm.$valid；}

Answer 2

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

示例：

<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)

Answer 3

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

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

The reference is here