title: Angular 9 - Form not valid onInit if input autofilled by Browser
body: <p>So I noticed a lot of threads about this, but all older and there wasn't an official solution.
  Maybe now there is a solution for this problem.
  But basically if you have a form with a username input field, when the page loads the first time, if the browser autofills that value (Because you saved your credentials in your browser), the &quot;<code>login</code>&quot; button will be still disabled because the form is still invalid until the users clicks anywhere for the first time.</p>
  <p>The latest proposed solution I found was using Angular official: <code>AutofillMonitor</code>
  But it doesnt work:</p>
  <pre><code> @ViewChild(&quot;email&quot;) inputEl: ElementRef;
  
  constructor(
      private formBuilder: FormBuilder,
      private _autofill: AutofillMonitor
    ){
      this.emailForm = this.formBuilder.group(
        {
          userLogin: [
            &quot;&quot;,
            {
              validators: [Validators.required],
            },
          ],
          password: [
            &quot;&quot;,
            {}
          ]
        }
      );
    }
  
  ngAfterViewInit() {
      this._autofill.monitor(this.inputEl)
      .subscribe(e =&gt; {
          if (e.isAutofilled) {
            // this works, the code gets in here onInit
          this.forceValidityCheck();
          }
        }
      );
    }
  
  forceValidityCheck() {
      this.emailForm.controls[&quot;userLogin&quot;].updateValueAndValidity();
    }
  </code></pre>
  <p><strong>HTML CODE:</strong></p>
  <pre><code>&lt;ng-container&gt;
        &lt;form [formGroup]=&quot;emailForm&quot; (ngSubmit)=&quot;checkAndLoadUserInfo(emailForm.get('userLogin').value)&quot;&gt;
        &lt;mat-form-field appearance=&quot;standard&quot; class=&quot;standardInputField&quot;&gt;
          &lt;mat-label translate&gt;enter_email.username&lt;/mat-label&gt;
          &lt;input matInput formControlName=&quot;userLogin&quot; #email type=&quot;email&quot; placeholder=&quot;name@example.org&quot; (keyup.enter)=&quot;checkAndLoadUserInfo(emailForm.get('userLogin').value)&quot; autofocus autocomplete=&quot;username&quot;&gt;
          &lt;label class=&quot;pswValidationLabels&quot; *ngIf=&quot;emailForm.get('userLogin').hasError('doesNotExist')&quot; translate&gt;
            enter_email.unknown_user
            &lt;/label&gt;
        &lt;/mat-form-field&gt;
  
        &lt;mat-form-field appearance=&quot;standard&quot; class=&quot;hiddenFormField&quot;&gt;
        &lt;input matInput type=&quot;password&quot; autocomplete=&quot;current-password&quot;&gt;
        &lt;/mat-form-field&gt;
  
        &lt;div&gt;
          &lt;button [disabled]=&quot;!emailForm.get('userLogin').valid&quot; mat-raised-button&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;/ng-container&gt;
  </code></pre>
  <p>But the form stays invalid even like this, until the users clicks anywhere on the screen, then it gets valid.</p>
  <p>Is there an official solution for this?</p>