title: Angular: Call markAsDirty() in Custom Input Component from NgForm
body: <p>I implemented a custom component which is a wrapper for an input with NgModel. I connected them with a ControlValueAccessor. It works well, I can easily access values from my parent component.</p>
  
  <p>But if I try to call markAsDirty() the touched flag is only changing on my component, it has no effect to my input inside the component. I will give you an example:</p>
  
  <pre><code>// Parent Component
  onSubmit(form: NgForm) {
      this.form.controls.registerEmail.markAsDirty();
  }
  
  // Thats how the component looks like in my form:
  &lt;form #form="ngForm" (ngSubmit)="onSubmit(form)" [ngClass]="{'has-error': !form.valid}"&gt;
      &lt;form-text label="E-Mail" name="registerEmail" email required placeholder="" [(ngModel)]="eMail"&gt;&lt;/form-text&gt;
  &lt;/form&gt;
  
  // Result
  &lt;form-text label="E-Mail" name="registerEmail" class="ng-untouched ng-invalid ng-dirty"&gt;
      &lt;label for="form-text-2"&gt;E-Mail&lt;/label&gt;
      &lt;input class="input-control invalid ng-untouched ng-pristine ng-invalid" type="text" id="form-text-2"&gt;
  &lt;/form-text&gt;
  </code></pre>
  
  <p>As you can see the form-text has the "ng-dirty" class, the input inside remains pristine.</p>
  
  <p>To implement my custom component I used one the many instructions you find on the web. Here is the one I used: <a href="https://medium.com/@tarik.nzl/angular-2-custom-form-control-with-validation-json-input-2b4cf9bc2d73" rel="noreferrer">angular2 custom form control with validation json input</a></p>
  
  <p>I want to mark every input field as dirty when the submit button is pressed. Because my validation shows up, when you blur the input.</p>
  
  <p>I figured out that there is the problem my component inherits from ControlValueAccessor. The only connection between my component and my NgForm is over its NgModel. The NgForm can use my component as FormControl because it has its own NgModel. Over events it's possible to pass values in two directions. But it's not possible with methods like markAsDirty() or markAsTouched(). Inside the component it's no problem. But my NgForm has no real access to components. Only to NgModel. </p>
  
  <p>Is there any way to implement that? I thought it's not that hard to figure it out, but I am struggling for a long time with that. My only solution for the moment is to iterate over every input with jQuery to fire a focus. There must be a cleaner solution for that.</p>
  
  <p>Thx</p>