title: Angular 2 Dynamic Nested Form
body: <p>Basically I want to create a dynamic form with nested objects like the picture below:
  <a href="https://i.stack.imgur.com/1Hubx.jpg"><img src="https://i.stack.imgur.com/1Hubx.jpg" alt="Angular 2 Nested Form Example"></a></p>
  
  <ul>
  <li>Pay offs are in an array on the model</li>
  <li>We should be able to add/remove pay offs as needed.</li>
  <li>The form should sync underlying form controls and model</li>
  <li>The number of pay offs is arbitrary and should be loaded into the form from the model</li>
  </ul>
  
  <p>There are no working examples that I could find as how to do this in Angular 2, although this was really easy to do in Angular 1.</p>
  
  <hr>
  
  <p><strong><em>Below is my original question, I've since updated it for clarification (see above):</em></strong></p>
  
  <p>First I just wanted to point out that I'm aware that a new version of Angular 2 rc.2 has just been released a few days ago. So the code for creating a dynamic, nested form may have changed some but there's not enough documentation to figure this out.</p>
  
  <p>In the latest version(s) of Angular 2 (I'm currently using rc.1 but planning to update to rc.2) I need to create a form like this (pseudo-code of view):</p>
  
  <pre><code>&lt;form [ngFormModel]="form" (ngSubmit)="onSubmit()"&gt;
    &lt;input type="text" ngControl="name"&gt;
  
    &lt;div *ngFor="let expense for expenses; let i = index;" control-group="expenses"&gt;
      &lt;input type="text" ngControl="expense.amount" [(ngModel)]="myModel.expenses[i].amount"&gt; 
      &lt;input type="checkbox" ngControl="expense.final" [(ngModel)]="myModel.expenses[i].final"&gt; 
    &lt;/div&gt;
  
    &lt;a class="button" (click)="addExpenseControl()"&gt;Add&lt;/a&gt;
    &lt;a class="button" (click)="deleteExpenseControl()"&gt;Delete&lt;/a&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So the pseudo-code above won't work but to be honest because of lack of documentation I can't figure out how to wire something like this up. There's a few tutorials about nested ControlGroup but this won't fit the case here since we need to be able to dynamically add and remove control groups, and also I need to be able to sync them with a model. </p>
  
  <p>I found this <a href="http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview">plunkr</a> here provided by Angular team which allows adding of Controls to a form--but this is not adding/removing a <em>ControlGroup</em>, rather it's using ControlArray and I'm not sure if that applies here? </p>
  
  <p>I'm very familiar with using the newer model-based Angular 2 forms however I'm grasping for resources in order to properly nest them (dynamically!), and tie this nested data into the main form model. How would I refer to nested controls in the view? Is the pseudo-code above even close? I'd post code from my controller but honestly I wouldn't know where to start when it comes to the nested expenses (ControlGroup ??) above...</p>