AngularJS custom form component / directive using ng-model

Question

Angular custom form component / directive and $dirty property

When using regular input, such as

Answer 1

Implementing custom form controls (using ngModel)

Use the ngModel controller and the object form of the require property in the DDO:

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `

          
              Set foo
          
          
              Set bar
          
       
`,
    controller: function ctrl() {}
  };
});

Usage:

By instantiating and using the ng-model controller, the directive will automatically set the form controls as necessary.

The DEMO

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    require: { ngModelCtrl: 'ngModel' },
    scope: {
      ngModel: '<'
    },
    bindToController: true,
    controllerAs: '$ctrl',
    template: 
       `

          
              Set foo
          
          
              Set bar
          
       
`,
    controller: function ctrl() {}
  };
});

  
    
ngModel DEMO
    

        
        
    
    
myForm.$dirty = {{myForm.$dirty}}
    
myForm.$pristine = {{myForm.$pristine}}
    
Set dirty
    
Set pristine
  

I recommend isolate scope with ngModel as an input. Output should be done with the $setViewValue method.

For more information, see

• AngularJS Developer Guide - Implementing custom form controls (using ngModel)

• AngularJS Developer Guide - Component-based application architecture