How to properly submit a form using AngularJS

The short version is that you should use ng-submit on your form element and an input with type=”submit” tocall your form submit function.

Now to explain:
When creating your forms in AngularJS it may be tempting to add your inputs and then at the bottom add a button with an ng-click function on it to “submit” the form. Like this:
———————————————————————
<form name=”testForm”>
    <input name=”fname” ng-model=”user.fname”>
    <input name=”lname” ng-model=”user.lname”>
    <button ng-click=”submitForm()”>Click me</button>
</form>
———————————————————————
While this may work, you are preventing your user’s browser from storing the data entered into the inputs for autocomplete later. Since the form is not submitted, the browser has no way to know to store those input values. For all the browser knows, your button just shows a tooltip with a smiley face in it.

Instead, you should place an ng-submit on the form element with the function you want to be called when you submit the form. Then at the bottom place an input with type=”submit” there instead. Like this:
———————————————————————
<form name=”testForm” ng-submit=”submitForm()”>
    <input name=”fname” ng-model=”user.fname”>
    <input name=”lname” ng-model=”user.lname”>
    <input type=”submit” value=”Click me”>
</form>
———————————————————————
When the user clicks the submit button, it will call your ng-submit function AND allow the browser to recognize a form is being submitted and store the data that was entered.

So while the ng-click approach works, you are crippling your user’s ability to quickly fill out the form next time they visit. Use the ng-submit attribute to….submit your forms.