Angular2 gotchas: Double binding within Form

Version: Angular2 RC4 RC5;

Problem: Double binding with <form> willnot work if you do not have a unique name property. For example, you have anngFor to display all the element as a <input> inside a <form> withdouble binding, all <input> elements will have the same value.

Demo:  Plunker link

Reason is all the input elements have the same nameproperty,<input [(ngModel)]="hero.name"placeholder="name" name="name">

Solution 1: You can simply delete <form>

Solution 2: One-way binding instead of double binding

<input value={{hero.name}} placeholder="name" name="name">

Solution 3: Double binding with unique name property,try it onPlunker

<div><label>id:</label>{{hero.id}}</div>
<div*ngFor="let hero of heroes; let idx=index">
<span style="white-space:pre">	</span><label>name:</label>
<span style="white-space:pre">	</span><input[(ngModel)]="hero.name" placeholder="name" name="name_{{idx}}">
</div>