Using the #AngularJS FormController to control form submission

 

One of the more frequent things you have to do in a forms over data application, the kind where AngularJS really shines, is create and validate data entry forms. The basics of this are pretty easy, just create a controller, add a model to the $scope, create an HTML form and add ng-model input elements for each property the user should enter. No big deal there.

 

However it would be nice if we could do basic validation in the form and disable a submit button if the form is invalid or the user hasn’t made any changes yet. It turns out this is quite easy to do in AngularJS as each HTML from element automatically creates a FormController and this contains a number of properties that tell us what the status of the form is. In this case we are interested in the $pristine which tells us if the user made any changes and the $invalid which tells us the form is considered to be invalid.

Add to this the ng-disabled directive which we can use to automatically disable an input control and we have the last missing piece to automatically enable/disable the form submit button.

 

   1: <!DOCTYPE html>

   2: <html>

   3: <head>

   4:     <title>Contacts</title>

   5:     <style>

   6:         label {

   7:             display: inline-block;

   8:             width: 100px;

   9:         }

  10:  

  11:         input[type=text], input[type=email] {

  12:             width: 200px;

  13:         }

  14:  

  15:         :invalid {

  16:             background-color: lightcoral;

  17:         }

  18:     </style>

  19: </head>

  20: <body ng-app="contactsApp" ng-controller="ContactsEditorCtrl">

  21:  

  22:     <form method="post" name="frm">

  23:         <div>

  24:             <label for="firstName">Firstname: </label>

  25:             <input type="text"

  26:                    name="firstName"

  27:                    ng-model="person.firstName"

  28:                    ng-required="true" />

  29:         </div>

  30:         <div>

  31:             <label for="lastName">Lastname: </label>

  32:             <input type="text"

  33:                    name="lastName"

  34:                    ng-model="person.lastName"

  35:                    ng-required="true" />

  36:         </div>

  37:         <div>

  38:             <label for="email">E-Mail: </label>

  39:             <input type="email"

  40:                    name="email"

  41:                    ng-model="person.email" />

  42:         </div>

  43:         <br />

  44:         frm.$pristine: {{frm.$pristine}}

  45:         <br />

  46:         frm.$invalid: {{frm.$invalid}}

  47:         <br />

  48:         <input type="submit" name="name" value="Submit" ng-disabled="frm.$pristine || frm.$invalid" />

  49:     </form>

  50:     <script src="Scripts/angular.js"></script>
   1:  

   2:     <script src="App/Contacts/App.js">

   1: </script>

   2:     <script src="App/Contacts/People.js">
</script>

  51: </body>

  52: </html>

 

we can add some more form validation to this if we want. In the example above I have added the ng-required attribute to indicate that the first and last name are required. I have also use the HTML5 input type=”email” for the input control to enter the users email address. AngularJS understands there new HTML5 input types and will recognize the field as invalid if the data entered doesn’t resemble an email address. IN fact it does a slightly better job than most browsers as Chrome considers “a@a” a valid email address but AngularJS wants us to enter at least a bit more with “a@a.aa”.

If we want we can show extra error messages is specific input fields fail validation like this:

   1: <span ng-show="frm.firstName.$error.required">The firstname is required</span>


 


Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>