title: How to tackle creating complex form with lots of custom components?
body: <p>Let's say that my generated html from angular2 app looks like this:</p>
  
  <pre><code>&lt;app&gt;
  &lt;form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm.value)"&gt;
  &lt;panel-component&gt;
      &lt;mid-component&gt;
          &lt;inner-component-with-inputs&gt;
              &lt;input/&gt;
          &lt;inner-component-with-inputs&gt;
      &lt;mid-component&gt;
  &lt;/panel-component&gt;
  &lt;panel-component&gt;
      &lt;mid-component&gt;
          &lt;inner-component-with-inputs&gt;
              &lt;input/&gt;
          &lt;inner-component-with-inputs&gt;
      &lt;mid-component&gt;
  &lt;/panel-component&gt;
  
  &lt;!-- many many many fields --&gt;
  
  &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/app&gt;
  </code></pre>
  
  <p>How can I set up my outer <code>&lt;form&gt;</code> in such a way that I can validate all inner inputs on submit? Do I have to pass <code>myForm</code> through <code>@Input()</code> all the way down from <code>panel-component</code> to <code>inner-component-with-inputs</code>? Or is there other way?</p>
  
  <p>In my application I have very big form with multiple panels, subpanels, tabs, modals etc. and I need to be able to validate it all at once on submit.</p>
  
  <p>All the tutorials and resources on the internet talk only about forms spanning one component/template.</p>