Form not updated when Browser auto-fills saved email/password until user interaction

I have a login form in Angular 16 with FormGroup validation.

When I open the login page in Chrome, the browser auto-fills the saved email and password fields. The values are visible in the input fields, but Angular’s reactive form does not seem to recognize them.

Because of that, the Login button stays disabled (form invalid) until I click inside one of the inputs or type something.

In Chrome edge or any other browser, just clicking anywhere in the window (not even inside the field) triggers change detection and the button becomes valid.

Without that extra interaction, Angular thinks the form is empty.

I tried to come up with several solutions but none of them worked.I added proper autofill detection with form value update, animation Frame for Better Performance, Input Event Listeners.

How can I make Angular detect the Chrome auto-filled values immediately on page load, so the form is valid without requiring the user to click or type first?

Added minimal reproducible example with code below:

<form [formGroup]="signInForm">
<!-- Email -->
<mat-form-field>
<mat-label>Email</mat-label>
<input id="email" matInput formControlName="email" autocomplete="email" />
<mat-error *ngIf="signInForm.get('email')?.hasError('required')">
Email is required
</mat-error>
</mat-form-field>

<!-- Password -->
<mat-form-field>
<mat-label>Password</mat-label>
<input
id="password"
matInput
type="password"
formControlName="password"
autocomplete="current-password"
/>
<mat-error *ngIf="signInForm.get('password')?.hasError('required')">
Password is required
</mat-error>
</mat-form-field>

<!-- Submit -->
<button mat-flat-button [disabled]="signInForm.invalid" (click)="login()">
Login
</button>
</form>

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
signInForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
rememberMe: [''],
});

constructor(private fb: FormBuilder) {}

login(): void {
console.log(this.signInForm.value);
}
}

Continue reading...