title: Passing ID in template driven Angular form
body: <p>I have created an Angular form following this article (<a href="http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/" rel="nofollow noreferrer">http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/</a>):</p>
  
  <pre><code>&lt;div *ngFor="let data of somevar.records"&gt;
    &lt;form #abc_form="ngForm" (ngSubmit)="onSubmit(abc_form.value)"&gt;
      {{data.id}}    // prints 5
      &lt;input name="id" type="hidden" value={{data.id}} ngModel&gt;
      &lt;input type="radio" name="name" value={{data.id}} ngModel&gt;
  
      &lt;div class="submit-button"&gt;
        &lt;button type="submit"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <strong>data</strong> hash in component looks something like:</p>
  
  <pre><code>somevar = {records: [{id: 5}, {id: 6}]}
  </code></pre>
  
  <p>Here, when I directly interpolate <code>data.id</code> in view it prints 5 in UI. But, when I try assigning it as a value to an hidden input field, it isn't present. Hence, upon form submission <strong>ID</strong> parameter is not present.</p>
  
  <p>What is wrong here? What is the correct way to pass <strong>ID</strong> then?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I also tried:</p>
  
  <pre><code>&lt;input name="id" type="hidden" [value]="data.id" ngModel&gt;
  </code></pre>
  
  <p><strong>NOTE</strong> The value gets assigned to the hidden field when I remove <strong>ngModel</strong>:</p>
  
  <pre><code>&lt;input name="id" type="hidden" [value]="data.id"&gt;
  </code></pre>
  
  <p>OR</p>
  
  <pre><code>&lt;input name="id" type="hidden" value={{data.id}}&gt;
  </code></pre>
  
  <p>Both the above works and creates hidden inputs with values assigned. But, it's not part of <strong>ngModel</strong> anymore</p>