Day 21: Directives and Angular Form Validation

Tuesday, June 28, 2016

Topics

Directives

• Creating Custom Directives
• Binding to isolate scope
  • = - two-way data binding
  • & - one-way data binding
  • @ - for binding of strings
• Use bindToController if using controllerAs syntax in the directive
• AngularJS Directives, Using Isolated Scope with Attributes

Data binding example

angular
  .module('myApp')
  .directive('myDirective', myDirective);

function myDirective() {
  return {
    templateUrl: 'myTemplate.html',
    restrict: 'E',
    scope: {
      example: '='
    }
  };
}

<my-directive example="vm.exampleValue"></my-directive>

Angular Form Validation

• AngularJS Form Validation - Excellent tutorial by scotch.io
• Angular form Properties
  • $valid - Boolean - Tells if an item is currently valid
  • $invalid - Boolean - Opposite of $valid
  • $pristine - Boolean - True if the item (form or input) has not been used yet
  • $dirty - Boolean - True if the item has been used
• Angular Documentation for Forms

Foundation Callouts

Easy Foundation classes useful for error rendering

Homework

We added callouts to display Firebase server errors and “email required” errors on the login form. Add additional callouts for validating email format and password presence.

Project

Mutant Office Hours: Source