title: Angular2 binding of "name" attribute in <input> elements with *ngFor
body: <p>I am experimenting with Angular2 and Angular Material. I used <code>*ngFor</code> to let Angular generate the <code>&lt;input&gt;</code> elements for me. However, in the resulting webpage, the generated element does not have <code>name</code> attribute.</p>
  
  <p>This is part of the code in <code>order-form.component.html</code>, which asks the user to input the number of different kinds of fruits:</p>
  
  <pre class="lang-ts prettyprint-override"><code>&lt;md-list-item&gt;
    &lt;md-icon md-list-icon&gt;shopping_cart&lt;/md-icon&gt;
    &lt;md-input-container *ngFor="let fruit of fruits" class="fruit-input"&gt;
      &lt;input mdInput [(ngModel)]="order[fruit]" [placeholder]="capitalize(fruit)" 
             [id]="fruit" name="{{fruit}}" required value="0" #fruitInput 
             (input)="onInput(fruitInput)"&gt;
    &lt;/md-input-container&gt;
  &lt;/md-list-item&gt;
  </code></pre>
  
  <p>This is the corresponding <code>order-form.component.ts</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, OnInit } from "@angular/core";
  import { Order } from "app/order";
  import { PAYMENTS } from "app/payments";
  import { OrderService } from "app/order.service";
  
  @Component({
    selector: 'app-order-form',
    templateUrl: './order-form.component.html',
    styleUrls: ['./order-form.component.css']
  })
  export class OrderFormComponent implements OnInit {
  
    order = new Order();
  
    payments = PAYMENTS;
  
    fruits: string[] = [
      'apples',
      'oranges',
      'bananas'
    ];
  
    constructor(public service: OrderService) {
    }
  
    ngOnInit() {
    }
  
    get totalCost() {
      return this.service.getTotalCost(this.order);
    }
  
    onFocus(element: HTMLElement) {
      element.blur();
    }
  
    onSubmit() {
      console.log('onSubmit');
    }
  
    onInput(element: HTMLInputElement) {
      console.log(element);
      if (!this.service.isValidIntString(element.value)) {
        window.alert(`Please input a correct number for ${element.name}`);
        element.value = '0';
      }
    }
  
    capitalize(str: string): string {
      return this.service.capitalize(str);
    }
  
    get debug() {
      return JSON.stringify(this.order, null, 2);
    }
  }
  </code></pre>
  
  <p>In the Chrome browser, when I right click the 'apples' <code>&lt;input&gt;</code>, the <code>name</code> attribute of the element is empty, but the <code>ng-reflect-name</code> is set to <code>apples</code> correctly? How to resolve this problem?
  <a href="https://i.stack.imgur.com/sapY7.png" rel="noreferrer">No <code>name</code> attribute here, but <code>ng-reflect-name</code> is <code>apples</code></a></p>