Angular onsubmit for form

Question

I need the functionality of the onsubmit attribute on a form - namely when I call this onsubmit function, it must return truthy in order for the form to post. However I would like to do this with an angular function call, along the lines of:

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

However the above gives out errors about interpolation being used on onsubmit. I tried putting in ng-submit and it does not work since the action property I have set is overridden.

Have you looked at the documentation? That is a good place to start: https://docs.angularjs.org/api/ng/directive/ngSubmit — catalyst294, Aug 27 '14 at 16:28
Yes I have. "Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain `action`...". So that doesn't appear to be the solution. — Zambezi, Aug 27 '14 at 18:52

score 6 · Answer 1 · edited May 23 '17 at 12:24

Not sure if it's still valid for you, but as I've been fighting the similar problem.

Following answer brought me to the right track: https://stackoverflow.com/a/17769240/1581069

So, to sum up the steps required:

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();" ...
```
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.

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

score 3 · Answer 2 · answered Jun 26 '15 at 00:21

Try using the ng-submit attribute instead of onsubmit. Related advise: Many attributes are not supported by Angular. You should find the ng- equivalent of the attribute you want to use to get Angular to react to them properly.

Example:

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

Where the validate() method in ng-submit is a method declared on your $scope.

Here is a related tutorial: AngularJS Tutorial (ng-submit)

score 1 · Answer 3 · edited Jan 14 '22 at 02:19

1

Well I know this could help somebody looking for how to use the submit form action in Angular. I'm working with Angular 13 and this is how we can capture the submit action:

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

The reference is here

edited Jan 14 '22 at 02:19

Dharman

30,962
25
85
135

answered Jan 14 '22 at 02:14

Denner Antonio Portuguez Villa

31
2

What if the form element has an `action` attribute? I want to post to that URL and being notified if this succeeds. But it seems that `action` is ignored when I introduce Angular forms? – PAX Jan 29 '23 at 12:57

score -1 · Answer 4 · answered Jun 23 '23 at 18:57

use onsubmit="return angular.element(this).scope().validate();" to use angular validate funcation.

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

Angular onsubmit for form

4 Answers4