AngularJS

Angular: Requiring ng-model as Component

To turn a custom component of an input element into a ng-model/validation enabled one, and to be able to use NgModelController and all its fancy methods in its controller:

Use the require syntax as component specifies here:

angular.module("Batcave").component("rock", {
  template: '<input type="text" />',
  require: {
    ngModelCtrl: "ngModel"
  },
  bindings: {
    ngModel: "<"
  },
  controller: rockController
});

Notice that it’s require: {ngModelCtrl: "ngModel"}, not {ngModel: "ngModel"}.

The part on left of colon is the reference name we’re getting in our component’s controller, while the right part is the camelCase name of the directive/component we’re requiring. The ngModelCtrl part should not have the same name with the attribute name we’re using in bindings (in this case ngModel, by default). Otherwise you’ll find yourself very much confused.

Also:

1. For validation (ng-valid, ng-invalid in its class) and error messages to work–we’ll need to have name attribute in the template:

<rock name="password" ng-model="data.password">

2. For classes ng-touched, ng-untouched to work–we might need to do ngModelCtrl.$setTouched manually, depending on our template, plus $scope.$apply(), if we don’t use ng-events to trigger the touch. That’s because the <input> we put in template in this case isn’t being closely watched by ng-model right on its back, and our <rock> component isn’t exactly born with a blur event to do the trick.

Standard