I have a template driven form in Angular 2.1 containing many standard controls (<input>, <select>
etc) and a custom control which itself contains multiple input elements.
I've implemented ControlValueAccessor on the custom control and it is propagating it's changed/touched/valid values correctly to the parent form.
However .. on the parent form I have a Save button, on which after saving I want to clear the dirty/touched state (as this affects the css applied) like this:
save(myForm: NgForm) {
myForm.form.markAsPristine();
myForm.form.markAsUntouched();
}
This is working ok for all the elements in the top level parent form and the custom control itself but the <input>
fields within the custom control are still marked as touched/dirty (and this receiving the pre-saved styling).
Is there a way that the custom control can be notified when it's dirty/touched state is changed so that it can then clear it's child <input>
elements to match? It seems that if the <input>
elements are within a custom control they don't get updated by calls to markAsPristine/Untouched on the parent Form.
Thanks!