Archives

AngularJS - how to submit a form from the outside

How to trigger ng-submit?

Let's say you have HTML like this:

1
2
3
4
<form ng-submit="submit()">
    <input ng-model="formData" required />
</form>
<button type="submit">Submit from the outside</button>
1
2
3
4
//inside of a controller
$scope.submit = function(){
    //this is called when the form submits
}

This doesn‘t work. If the button was inside of the form element, this would work but it’s not always how you want to setup your HTML.

Is it possible to trigger ng-submit from outside of the form?

I tried some differnt ways but so far it doesn't seem to be possible to actually trigger the form submission that Angular is watching.

Do you have to trigger that?

Not really. You aren‘t really using browser’s native feature to POST the form anyway. ng-submit is nice but what it does are:

  • Find buttons that submit the form and listen to the click(ex: type=“submit”)
  • When those buttons get clicked, it runs the expression inside of the ng-submit, if the form is valid.

So it‘s not difficult to mimic what it’s doing. Please check this out.

You can access to the controller of the form directive easily

In the fiddle, you see I'm accessing to the controller of the form directive by just calling the name of the form on the $scope just like $scope[“formName”].

1
2
3
<form name="testForm" ng-submit="submit()>
    <input ng-model="formData" required />
</form>
1
2
3
if ($scope.testForm.$valid) {
    $scope.submit();
}

This let you check if the form is valid very easily.
So now you don't have to try to make the form trigger the submit, instead, you can check if the form is valid and do whatever you need to do, enjoy!

How to break out of the forEach

Array.prototype.forEach

forEach is such an useful method.
But…how can I break the forEach loop?

Well… you can't break forEach.

Example:

1
2
3
4
5
6
var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];

ary.forEach(function(value, index, _ary) {
    console.log(index + ": " + value);
    return false;
});

Fiddle
The result should look like

1
2
3
4
0: JavaScript
1: Java
2: CoffeeScript
3: TypeScript

It's still iterating through all items in the array.

Well, dang, it sucks. What should I do if I want to stop the loop based on the condition?
It's simple.

Don't use “forEach”. Use “some” or “every”.


Array.prototype.some

some is pretty much the same as forEach but it break when the callback returns true.

Example:

1
2
3
4
5
6
var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];

ary.some(function (value, index, _ary) {
    console.log(index + ": " + value);
    return value === "CoffeeScript";
});

Fiddle
The result should look like

1
2
3
0: JavaScript
1: Java
2: CoffeeScript

Oh? What happened to TypeScript? Since the third iteration returned true, we successfully stopped the loop!


Array.prototype.every

every is almost identical to some except it's expecting false to break the loop.

Example:

1
2
3
4
5
6
var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];

ary.every(function(value, index, _ary) {
    console.log(index + ": " + value);
    return value.indexOf("Script") > -1;
});

Fiddle
The result should look like

1
2
0: JavaScript
1: Java

Since “Java” doesn't really contain “Script” in it so the callback for the iteration returned “false”. It broke the loop.

Now you can break loops whenever you want! Enjoy.