Using template driven form with dynamic input list (ngFor)
<p>I am new to web development and is working on a MEAN stack project using angular2. 
I am trying to add template-driven form with dynamic list of input using ngFor - however I did observe an abnormal behavior with the way I implement it. I am wondering if I am doing it the right way...</p>

<p>Abnormal behavior: If I were to add 2 or more input field and remove the non-last-entries input, the next time i add the new entries, it resets all the entries below the one I just deleted. In addition, somehow the new entries are binding with the entries above? </p>

<p><a href="http://i.stack.imgur.com/F8xUm.gif" rel="noreferrer">demo of the issue</a></p>

<p>Here is my plunker:
<a href="http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview" rel="noreferrer">http://plnkr.co/edit/FjLg8VDDo3E6fHVgS8ah?p=preview</a></p>

<p>Here is the way that I implement template driven form with dynamic input using ngFor. I was referring to another stackoverflow post:angular-2-template-driven-form-with-ngfor-inputs</p>

<pre><code>&lt;div *ngFor="let hero of heroArray; let i = index"&gt;

             &lt;div class="form-group"&gt;
            &lt;label for="name"&gt;Name&lt;/label&gt;
            &lt;input type="text" class="form-control" id="name"
                   required
                   [(ngModel)]="hero.name" name="name-{{i}}"
                   #name="ngModel" &gt;
            &lt;div [hidden]="name.valid || name.pristine"
                 class="alert alert-danger"&gt;
              Name is required
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
</code></pre>

<p>Any help is appreciated. Thanks! </p>