How can I handle isDirty in a component?

Question

I'm using Angular 1.5 and am creating a custom drop-down. There are no elements that use ngModel involved. I want to be able to have a form know if my component is dirty, pristine, etc. My thinking is that I'd use ngModel, like I would a directive. However, since there is no linking function in a component, I'm not sure how to do this. Is it even possible?

Let's just say my component template is this:

<div>{{model.Value}}</div>

My code is this:

angular.component('myThing',  {
    bindings: {
        model: '='
    },
    require: '^ngModel'
})
.controller('myThingController', () => {
    // stuff and things
});

I made a really simple example instead of all of my code because I'm not sure where to even begin with using ngModel within a component. I didn't think it served anyone to have me code dump. If more code is required, please feel free to ask and I'll happily expand my example.

I created a simple pen to try to work through this: http://codepen.io/yatrix/pen/rWEJYV?editors=1011

Answer 1

You can use require: { ngModel: '^ngModel' } on your component declaration. And you can access through the controller context, i.e., this.ngModel within your controller.

The following snippet implements an example based on your codepen.

var app = angular.module('app', []);

app.controller('ctrl', ($scope) => {
  $scope.model = {
    value: "Hello"
  };
});

app.component('myThing', {
  require: {
    ngModel: '^ngModel'
  },
  template: '<div>{{$ctrl.ngModel.value}}</div><br/><button type="button" ng-click="$ctrl.doSomething()">Click This</button>',
  bindings: {
    ngModel: '='
  },
  controller: function() {
    this.doSomething = function() {
      console.log(this.ngModel);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">

  <my-thing ng-model="model"></my-thing>

</div>