title: Changing the value of a text box not updating the model inside a form in angular
body: <p>So I have been playing around trying to set the value of a text box for my unit tests. The text box is linked to the component model using ngModel. I have managed to get it all working in a simple example. However as soon as I put the text box inside a form tag it stops working and I was wondering if anyone could tell me why?</p>
  
  <p>So I have the following component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    newOrgName:string = 'app';
  }
  </code></pre>
  
  <p>With the following template:</p>
  
  <pre><code>&lt;input [(ngModel)]="newOrgName" name="app-input" id="app-input" type="text"&gt;
  </code></pre>
  
  <p>And the following unit test:</p>
  
  <pre><code>import { FormsModule } from '@angular/forms';
  import { By } from '@angular/platform-browser';
  import { async, TestBed, } from '@angular/core/testing';
  
  import { AppComponent } from './app.component';
  
  describe('AppComponent', () =&gt; {
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
        imports: [
          FormsModule
        ],
  
      }).compileComponents();
    }));
  
    it(`changing the value in the text box should update the model`, async(() =&gt; {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      fixture.detectChanges();
      let el: HTMLInputElement = fixture.debugElement.query(By.css('#app-input')).nativeElement;
  
  
      el.value = 'Bob';
      el.dispatchEvent(new Event('input'));
      fixture.detectChanges();
  
      expect(app.newOrgName).toEqual('Bob');  
    }));
  });
  </code></pre>
  
  <p>And it all works but as soon as I change the template to put the input in a form tag like so:</p>
  
  <pre><code>&lt;form&gt;
      &lt;input [(ngModel)]="newOrgName" name="app-input" id="app-input" type="text"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The test fails and it says: "Expected 'app' to equal 'Bob'". So the model is no longer being updated. Why is this?</p>