HTML form

Form Validation

https://scotch.io/tutorials/easy-angularjs-forms-with-angular-formly

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

http://blog.thoughtram.io/angularjs/2015/01/23/exploring-angular-1.3-ngMessages.html

http://www.htmlxprs.com/post/11/angularjs-1.3-form-validation-tutorial

http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html

http://odetocode.com/blogs/scott/archive/2014/10/16/working-with-validators-and-messages-in-angularjs.aspx

http://www.sitepoint.com/easy-form-validation-angularjs-ngmessages/

1. When you give a <form> a name, Angular will add a property with the same name to the current $scope.

2. All named inputs inside a named <form> will be added to the form’s named property in $scope.

3. Each form and input still have boolean properties to describe if the object is $pristine or $dirty, and $valid or $invalid.

4. Angular still adds CSS classes to each form and input describing the state of the object (ng-dirty, ng-pristine, ng-valid, ng-invalid).

5. There is still an $error property on each form and input. The $error property describes failed validations.

Angular provides basic implementation for HTML5 validation with its ngModel directive and controller and makes it consistent between browsers. Here’s a list of supported validation attributes:

ng-required ng-minlength ng-maxlength ng-min ng-max ng-pattern

In addition to that, Angular validates certain input types automatically without us doing anything. The following code displays a simple form that has just one field of type email. Applying an ng-model to it makes Angular aware of it. Also notice the name attribute of the form which publishes theFormController instance of the form into the scope.

<form name="myForm"> <input type="email"> <p ng-if="myForm.$error.email">Email address is not valid!</p></form>

Running this code in the browser, you can see the validation happens automatically. Errors are even exposed on the FormController’s $errorobject, which makes displaying error messages a breeze. The email is not the only type where automatic validation happens. It’s also triggered when type url or number is used. In 1.3 there’s additional support for date and time inputs like date, time, datetime-local, week and month as well.