Validation Directives in AngularJS

Source Code

Presentation Example Project
https://github.com/Transcordia/ng-meetup
​The source for this presentation is in the "ng-directives" directory

Topics

• Angular Form Validation Directives

Form/NgModel Object Relationships

Key Controllers

• FormController
  • Directive Controller created by the form directive
  • Primary Responsibility is to monitor the overall validity of the form and whether it is "pristine" or "dirty"
• NgModelController
  • Directive controller created by the ngModel directive
  • Provides the API for managing the state between the model value and the form element to which it is associated
  • Provides support for rendering the current form value, converting it to the bound model value, tracking validation 

Peak under the Covers

<!-- 
The form directive is created.  It is bound to the directive controller FormController 
which is injected into its link function.  The FormController initializes validation 
and pristine state.  Finally, myForm--a reference to the FormController--is added
to the scope.
-->
<form role="form" name="myForm" novalidate="novalidate">

<!-- 
Two directives are created: input directive and ngModel directive.  The ngModel 
directive requires as an optional controller, the FormController created above, 
as well as an NgModelController, both of which are injected into its
link function as an array. The ngModelController is added to the myForm controller
as an attribute named "firstLastName"
-->
    <input type="text" ng-model="user.firstLastName"  name="firstLastName" 
        placeholder="Enter Name">
</form>

Form Validation $error

• Each controller contains an $error object which stores the error state for particular validation directives

// The ngModelController.$error object holds a map each validation on the HTML Element
userForm.age.$error = {
    required: false,
    min: false,
    max: true
}


// The FormController.$error object holds an map of validations, each holding
// the array of ngModelController objects
userForm.$error = {
    max: [
        // array containing each ngController Object that violates the "max" validation
    ],

    required: [
        // array each ngController Object that violates the "required" validation
    ]
}

Angular 1.3 Validators

• Validators are a separate object applied to the NgModelController
• No longer hijacks the $parsers array to provide validation.

• ngModel.$validators.minDate = function (modelValue, viewValue)...

Example

• Example 1:
  • Validate that Date input field is always greater than a provided date.  E.G. the value is valid if the selected date is after 1/1/2000
• Example 2:
  • Validate that the selected date is a given number of days after another date.
  • Bonus, make it dependent on another date field so that if the original date changes, the validation state reflects this.