title: Angular 2 and browser autofill
body: <p>I'm implementing login page with Angular reactive forms. Button "login" is disabled if form is invalid.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
      selector: 'signin',
      templateUrl: './signin.component.html'
  })
  export class SignInComponent implements OnInit {
      private signInForm: FormGroup;
  
      constructor(private formBuilder: FormBuilder) { }
  
      ngOnInit() {
          this.buildForm();
      }
  
      private buildForm(): void {
          this.signInForm = this.formBuilder.group({
              userName: ['', [Validators.required, Validators.maxLength(50)]],
              password: ['', [Validators.required, Validators.maxLength(50)]]
          });
  
          this.signInForm.valueChanges
              .subscribe((data: any) =&gt; this.onValueChanged(data));
  
          this.onValueChanged();
      }
  
      private onValueChanged(data?: any) {
          console.log(data);
      }
  </code></pre>
  
  <p>So, when I launch it in browser, I have prepopulated fields "userName" and "passwords". And in console I have values '{ userName: "email@email.com", password: "" }' and as a result button "login" is disabled. But if I click somewhere on page it trigger <strong>onValueChanged</strong> and I see <em>'{ userName: "email@email.com", password: "123456" }'</em>, and button "login" is enabled.</p>
  
  <p>If I go in incognito mode. I have no prepopulated fields (they are empty), but when I populate (select) values, then in console I see <em>'{ userName: "email@email.com", password: "123456" }'</em>, and button "login" is enabled without any extra click.</p>
  
  <p>May be they are different events? Autofill and autocomplete? And angular works with them differently?</p>
  
  <p>What is the best way to resolve it? And why <strong>onValueChanged</strong> function is executed only once when browser autofill fields?</p>