title: Very simple ngModel example
body: <p>I have a simple form</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form role=&quot;form&quot; (submit)=&quot;login()&quot;&gt;
    &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; required=&quot;required&quot; [ngModel]=&quot;credentials.username&quot;/&gt;
    &lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot; required=&quot;required&quot; [ngModel]=&quot;credentials.password&quot; /&gt;
    &lt;button type=&quot;submit&quot;&gt;Sign in&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>and a component ts.</p>
  <pre class="lang-ts prettyprint-override"><code>export class LoginComponent implements OnInit {
    credentials = {username: '', password: ''};
    
    constructor(private loginService: LoginService, private http: HttpClient, private router: Router) { }
    
    ngOnInit() { }
    
    login() {
      console.log(this.credentials);
      this.loginService.authenticate(this.credentials, () =&gt; {
        this.router.navigateByUrl('/');
      });
      return false;
    }
  }
  </code></pre>
  <p>service</p>
  <pre class="lang-ts prettyprint-override"><code>authenticate(credentials, callback) {
    console.log(credentials);
    const headers = new HttpHeaders(credentials ? {
     authorization : 'Basic ' + btoa(credentials.username + ':' + credentials.password)
    } : {});
  }
  </code></pre>
  <p>My problem is that the credentials are always <code>''</code>. Shouldn't the <code>ngModel</code> update these values automatically?</p>