Submit regular form using Angular JS

Question

I have a normal HTML form with inputs, action, etc. already defined inside an Angular controller. However, this form doesn't have a submit button. Instead it has a button elsewhere on the page that is outside the form, but when clicked should trigger the normal form submission process. In other words, have the external button work as a normal submit button.

For example (with a very simplified version of what I have),

<div ng-controller='sendFormController">
    <form name='my_form' action='/path/to/form_handler.php' method="POST">
        <input type="text" name="form_data" />
    </form>

    <button ng-click='submitForm()">Send Data</button>
</div>

I've been looking for a solution to this problem but the only solutions I've been able to find (which are a bit hackish to my way of thinking) include,

• Having a hidden submit button and trigger that with the press of the external button.
• Having code that executes $http.post(), etc. when the external button is pressed. I don't want to have to duplicate the action, assembling the parameters, etc. in the function.

I'm assuming that there must be a way in Angular to simply trigger the submission of the form but I can't find it in the docs. Can anyone point me in the direction of what I'm missing?

Answer 1

In sendFormController,

$scope.submitForm = function() {
    document.getElementById('my_form').submit(); //force to submit the form after clicking the button
}

And,

<form name='my_form' id='my_form' action='/path/to/form_handler.php' method="POST">