reset AngularJS Material Design custom component to pristine - angularjs

Question

I have an AngularJS custom component that essentially wraps around a Material Design mdSelect, but provides easy configuration of available, default, and current values via its bindings.
But the component functions as a general editing component in an mdDialog that can change its options based upon the thing being edited. Thus is a "Next" button to go to the next "thing" to be edited. When the button is pressed the custom component will have new available, default, and current values—something like this:
<foo-component default-value="dialog.getDefaultFoo()" current-foo="dialog.currentFoo">
</foo-component>
Note that the component, if a list of available values is not given (as in the example above), the component assumes a list of values with only one value, the "default-value" indicated.
So when a user selects "Next", the list of values in the mdSelect will change, because the value returned by dialog.getDefaultFoo(). The new selected value will be dialog.currentFoo.
But if dialog.currentFoo is null, I want the control to automatically select the indicated default value, or if no default is indicated, the first available value. That's easy enough when the component is created using $onInit. But once it is created, how do I know (inside the component) that the user has selected "Next" and the list of available values has changed?
In the code for the "Next" button, I call this.fooForm.$setPristine(). According to the documentation, the when this method is called the form controller will "propagate to all the controls contained in this form." So I considered having my custom control hook detect that $setPristine() is being called, so that it can automatically select a default value from the list if the new value is null. But how now I'm back in the same situation: how does my custom component detect that $setPristine() is being called on the form?
In essence, my custom component needs to detect when one of its bound values changes, and perform some custom update of other values under certain conditions. I know that I can use a getter/settter from outside the custom component, but how does the custom component detect that one of its bound values has changed?
To make matters more complicated, dialog.currentFoo is actually a function, which my component recognizes as a getter/setter function which will return/update the correct value based upon the state of the dialog. So I can't even detect that this value has changed, because the actual function never changes—only the value that it returns will change.
And it's actually even more complicated than that, because the mdSelect is only one piece of the object that gets sent to dialog.currentFoo; otherwise it isn't propagated outside the component.
Trying to summarize, I need to know in a custom component if the binding dialog.currentFoo, which is really a getter/setter method, would now return null so that the custom component could select a default value (also dynamic) based upon the current items (also dynamic) listed in the internal mdSelect. I would accept workarounds, such as detecting that $setPristine() has been called on the enclosing form. I would even accept a hack, such as forcing AngularJS to recreate the custom component when some external state changes.

Answer 1

This is tricky, because AngularJS is tricky, and because it's exceedingly hard to track information on custom AngularJS control/input components.
Above all the first thing that needs to be done is to make the custom component use the normal ngModel framework; trying to "fake" it using a two-way bound currentValue doesn't cut it for this complexity, and besides, ngModel is the "correct" AngularJS way to do it. To pull this off you'll need to use NgModelController. Finding out how to do this with a component is difficult in itself, although one page gave the magic formula. It goes something like this:
require: {
ngModelCtrl: "ngModel"
},
bindings: {
ngModel: "<"
//TODO add defaultValue or whatever other properties here
},
Then you don't access the two-way value directly; you use the NgModelController interface:
//get the current value
const foo = this.ngModelCtrl.$modelValue;
//set the current value
this.ngModelCtrl.$setViewValue(foo);
As best I can tell, if you add ng-model-options="{getterSetter:true}" to the component, the ngModelOptions will automatically get applied to your model, and getters/setters will be called automatically.
Now you are hooked into the whole ngModel framework, and use NgModelController to add/access validators and all sorts of advanced features.
Getting back to my needs, where I need to "reset the component" in certain conditions, I can patch into NgModelController#$setPristine(). The form controller recognizes my component is part of the ngModel framework, and calls $setPristine() when the form is reset to its pristine state.
this.$onInit = () => {
this.ngModelCtrl.$setPristine = () => {
myInternalValue1 = null;
myInternalValue2 = this.defaultValue;
};
this.ngModelCtrl.$setPristine(); //initialize default value
};
This explains the doubt I had about the form controller "propagat[ing $setPristine()] to all the controls contained in this form", which I mentioned in my original question. The secret is that the component must become part of the real ngModel system so that it can interact as AngularJS is expecting, as well as to gain access to important internal methods.