title: Angular form wrapped around components
body: <p>I have a scenario which is like that</p>
  
  <blockquote>
    <p>I need a form wrapped around components</p>
  </blockquote>
  
  <p>and HTML structure should like below:</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="clickForm(f)"&gt;
     &lt;app-component-1&gt;&lt;/app-component-1&gt;
     &lt;app-component-2&gt;&lt;/app-component-2&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And each component has specific set of inputs, and whole structure look like this:</p>
  
  <pre><code>&lt;form #f="ngForm" (ngSubmit)="clickForm(f)"&gt;
     &lt;app-component-1&gt;
          &lt;input type="text" name="name" #name="ngModel" ngModel required /&gt;
          ..so on upto 10 inputs
     &lt;/app-component-1&gt;
     &lt;app-component-2&gt;
          &lt;input type="text" name="name2" #name2="ngModel" ngModel required /&gt;
          ..so on upto 10 inputs
     &lt;/app-component-2&gt;
     &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But Form Validations not working. and Form status us always VALID.
  Any suggestion please?</p>