title: ngModel cannot detect array changes correctly
body: <p>The component model:</p>
  
  <pre><code>private SomeArray = [{ key: "Initial" }];
  </code></pre>
  
  <p>User can add/remove items dynamically:</p>
  
  <pre><code>addField() {
      this.SomeArray.push({ key: Math.random().toString() });
  }
  
  removeField(index: number) {
      this.SomeArray.splice(index, 1);
  }
  </code></pre>
  
  <p>Template markup:</p>
  
  <pre><code> &lt;div class="col-xs-12"&gt;
       &lt;button (click)="addField()" type="button"&gt;Add&lt;/button&gt;
   &lt;/div&gt;
  
   &lt;div *ngFor="let field of SomeArray; let i = index;"&gt;
       &lt;input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required /&gt;
       &lt;div [hidden]="modelField.pristine || !(modelField.errors &amp;&amp; modelField.errors.required)" class="alert alert-danger"&gt;
          Required error
       &lt;/div&gt;
  
      &lt;button (click)="removeField(i)" class="btn btn-danger"&gt;Remove&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This works untill user removes any item from <code>SomeArray</code>. If I add some two items initially:
  <a href="https://i.stack.imgur.com/eIjVX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eIjVX.png" alt="enter image description here"></a></p>
  
  <p>and remove the one with 1 index:</p>
  
  <p><a href="https://i.stack.imgur.com/NYwYO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NYwYO.png" alt="enter image description here"></a></p>
  
  <p>then after adding another item Angular treat it as item has both 0 and 1 index (the new item "occupies" both two inputs):</p>
  
  <p><a href="https://i.stack.imgur.com/g3DpH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g3DpH.png" alt="enter image description here"></a></p>
  
  <p>(item with key 0.1345... is not displayed)</p>
  
  <p>It's worth to noting items of <code>SomeArray</code> are as expected, but data binding fails. What can be the reason of it?</p>
  
  <p><strong>Update</strong>: Thanks to the comments of @Stefan Svrkota and @AJT_82 it's known for me the issue can be resolved by adding <code>[ngModelOptions]="{standalone: true}"</code> to the needed input. But I couldn't stop thinking about the reason of the issue in my cause, without setting <code>standalone</code> option (there is unique value for each name attribute so it's excepted nothing wrong here).</p>
  
  <p>Finally I have found that behavior occurs when  input elements are into <code>&lt;form&gt;</code> tag only - <a href="https://plnkr.co/edit/DvgYLsGpq6lBAFNqnjd6?p=preview" rel="nofollow noreferrer">Plunker sample here</a> (enclosing of template with form tag is the reason that issue).</p>
  
  <p>Any ideas of this behavior?</p>