connecting a custom form control to its parent form validation in angular 2
<p>I recently tried to create my own custom form control using angular 2.
The custom control should have 2 inputs, and edit an existing object with a known structure. For example:</p>

<pre><code>class model {
    public fieldOne: number;
    public fieldSec: number;
}
</code></pre>

<p>I followed the good explanation I found here:
<a href="http://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html" rel="nofollow noreferrer">Guide For Writing custom form controls</a></p>

<p>It worked alright except the guide didn't mention how I can connect
custom control form validation to the form that uses it.
Lets look at an simplified example:</p>

<p>The custom control template looks somehow like this:</p>

<pre><code>&lt;form&gt;
    &lt;input [(ngModel)]="existingModel.fieldOne"&gt;
    &lt;input [(ngModel)]="existingModel.fieldSec" required&gt;
&lt;/form&gt;
</code></pre>

<p>And we use it to edit an existing model which value is:</p>

<pre><code>{
    fieldOne: 20,
    fieldSec: undefined
}
</code></pre>

<p>And we use it in some form in my app where we need the custom control to edit this model:</p>

<pre><code>&lt;form #formVar="ngForm"&gt;
    &lt;my-custom-control [(ngModel)]="existingModel" required&gt;
    &lt;/my-custom-control&gt;
&lt;/form&gt;
</code></pre>

<p>This kind of example works in my app in the matter that I can edit the model.
The problem is that I want to show the user when the form is invalid, and if I look at formVar.valid it will be true even though <code>existingModel.fieldSec</code> is undefined and it has a required validation on it in the custom control form.</p>