title: Protractor .sendKeys() not working on inputs with ngModel
body: <p>I haven't been able to find anything on this topic, so I figured I would ask.</p>
  
  <p>I'm currently writing E2E tests on my <strong>Angular 5 application.</strong> E2E is being performed by <strong>Protractor</strong> as configured in a default Angular CLI generator project. I need the ability to change the value of a text input field from within my E2E tests. </p>
  
  <p>My current code.</p>
  
  <pre><code>...
  it('should submit report.',() =&gt; {
      page.setField("100");
  ...
  </code></pre>
  
  <p>The above references this class and method</p>
  
  <pre><code>import { browser, by, element } from 'protractor';
  
  export class Page {
  
  setField(text: string): Page {
      let field = element(by.id('myField'));
      field.sendKeys(text);
      return this;
  }    
  ...
  </code></pre>
  
  <p>and my html.</p>
  
  <pre><code>&lt;input id="myField" decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField" class="form-control input-sm"&gt;
  </code></pre>
  
  <p>It's very simple. Obviously I have generalized it for consumption... But hopefully it still gets the point across.  </p>
  
  <p>Things to note: </p>
  
  <ul>
  <li><p>If I remove the following from the html input field, .sendKeys() works</p>
  
  <pre><code>decimal="16" dataLoadedEvent="{{formatData}}" [(ngModel)]="rm.dataField"
  </code></pre></li>
  <li><p>If I just remove </p>
  
  <pre><code>decimal="16" dataLoadedEvent="{{formatData}}" 
  </code></pre>
  
  <p>sendKeys() still doesn't work. This means that the issue is with the [(ngModel)] binding that occurs on the field. Not with my custom decimal format directive.</p></li>
  </ul>
  
  <p>So, my question is, what do I need to do to make .sendKeys() work with fields that are bound using [(ngModel)]?</p>
  
  <p>Any help would be appreciated.</p>