title: Angular2 Custom Component - mark as pristine and untouched
body: <p>I have a template driven form in Angular 2.1 containing many standard controls (<code>&lt;input&gt;, &lt;select&gt;</code> etc) and a custom control which itself contains multiple input elements.</p>
  
  <p>I've implemented ControlValueAccessor on the custom control and it is propagating it's changed/touched/valid values correctly to the parent form.</p>
  
  <p>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: </p>
  
  <pre><code>save(myForm: NgForm) {
  
      myForm.form.markAsPristine();
      myForm.form.markAsUntouched();
  
  }
  </code></pre>
  
  <p>This is working ok for all the elements in the top level parent form and the custom control itself <strong>but</strong> the <code>&lt;input&gt;</code> fields within the custom control are still marked as touched/dirty (and this receiving the pre-saved styling).</p>
  
  <p>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 <code>&lt;input&gt;</code> elements to match? It seems that if the <code>&lt;input&gt;</code> elements are within a custom control they don't get updated by calls to markAsPristine/Untouched on the parent Form.</p>
  
  <p>Thanks!</p>