title: How to create a form dynamically based on values in input fields or dropdowns in Angular 2
body: <p>One of the requirement in my new project is to create a form on one single page in Angular 2. The form is quite complex. I should contains two other templates dynamically populated based on input values. I'll try to explain how it should work.</p>
  
  <p>The page should have three dropdowns (e.g. No.1,2,3) on the top and based on the values from those dropdowns the specific template with a dropdown (No.4) and a couple of input field should be displayed. If the value in the dropdown No.4 is selected one more specific template should be displayed with other input and dropdown fields again. When the inputs are filled and dropdowns selected, the form should be sent. </p>
  
  <p>Each dropdown should be populated by the values received from the server. The form has to be validated too.</p>
  
  <p>My idea is to create a main form and in that form to have a component that will be displayed based on selection of a value in dropdown.</p>
  
  <p>Something like in the parent component:  </p>
  
  <pre><code>&lt;form&gt;
    &lt;dropdown [(ngModel)]="layout"&gt;&lt;/dropdown&gt;
    &lt;layout-1 *ngIf="layout==1"&gt;&lt;/layout-1&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In the child component (layout-1):</p>
  
  <pre><code>&lt;div [formGroup]="layoutForm"&gt;
    &lt;dropdown [(ngModel)]="subLayout"&gt;&lt;/dropdown&gt;
    &lt;sub-layout *ngIf="subLayout==1"&gt;&lt;/sub-layout&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>In the next child component (sub-layout):</p>
  
  <pre><code>&lt;div [formGroup]="subLayoutForm"&gt;
    &lt;input/&gt;
    &lt;input/&gt;
    &lt;dropdown&gt;&lt;dropdown&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It'll be kind of 'three-level' nested form. </p>
  
  <p>Any idea how can I do this in Angular 2? </p>