title: Angular 2 - how to bind to a "dynamic" form field
body: <p>I am building a form generator with Angular 2. The form fields are defined in a datastore somewhere and rendered as a form at runtime by my Angular 2 template. I am trying to setup form binding for the dynamic form, but haven't succeeded so far.</p>
  
  <p>The first approach I took is below. An input element is rendered conditionally if the current form element ('element') if of type TEXT_INPUT. There is a model class ('model') defined in the backing component and I would like the input form element to bind to model.{{element.systemName}}.</p>
  
  <pre><code>&lt;input *ngIf="element.type == 'TEXT_INPUT'" type="text"
  [(ngModel)]="model.{{element.systemName}}" 
  class="field-long" placeholder="{{element.label}}" 
  name="{{element.systemName}}" /&gt;
  </code></pre>
  
  <p>This approach doesn't work. {{}} is not allowed as a value to ngModel.</p>
  
  <p>My second approach didn't work either, because "this" doesn't exist. </p>
  
  <pre><code>&lt;input (keyup)="updateModel(this)" (blur)="updateModel(this)"
  *ngIf="element.type == 'TEXT_INPUT'" type="text" 
  class="field-long" placeholder="{{element.label}}" 
  name="{{element.systemName}}"/&gt;
  </code></pre>
  
  <p>Is there some way I can refer to the current form element and send that to the backing component like updateModel(ref.to.current.form.element)?</p>
  
  <p>It seems that placing <strong>#myElementName</strong> on the element would create a reference, which would allow me to call updateModel(myElementName). But there again I run into the problem that I need a dynamic name like this #{{element.systemName}}.</p>
  
  <p>I am completely new to Angular 2, so I am hoping I am overlooking something obvious here.</p>
  
  <p>Thanks.</p>