Mastering Web Application

(Rick Simeone) #1
Chapter 5

Outside the ngForm we cannot reference the websiteForm (ngFormController)
object on the scope or the websiteForm.website (ngModelController) object since
they do not exist in this scope. We can, however, access the containing userForm
(ngFormController) object. This form's validity is based upon the validity of
all its child inputs and forms. If one of the websiteForms is invalid, so is the
userForm. The div at the top of the form displays an overall error message only if
userForms.$valid is true.


Handling traditional HTML form submission


In this section we take a look at how AngularJS handles submission of forms. Single
Page AJAX Applications, for which AngularJS is perfect, don't tend to follow the
same process of direct submission to the server as traditional web application do.
But sometimes your application must support this. Here we show the various
submission scenarios that you may wish to implement when submitting form data
back to a server.


Submitting forms directly to the server


If you include an action attribute on a form in an AngularJS application, then the
form will submit as normal to the URL defined in the action:


<form method="get" action="http://www.google.com/search">
<input name="q">
</form>

Try it at http://bit.ly/115cQgq.


Be aware that the Plnkr preview will block the redirection to Google.

Handling form submission events


If you don't include an action attribute, then AngularJS assumes that we are going
to handle the submission on the client side by calling a function on the scope. In this
case, AngularJS will prevent the form trying to directly submit to the server.


We can trigger this client-side function by using the ngClick directive on a button
or the ngSubmit directive on the form.

Free download pdf