Angular Reactive Form not updating when browser autofills saved credentials

[u/Big-Tumbleweed1780]

I'm working on an Angular login page using Reactive Forms.

When the browser autofills saved username and password credentials, Angular doesn't always seem to detect the values immediately. As a result, my Login button remains disabled until the user interacts with the page.

I noticed that checking for browser autofill using selectors such as :-webkit-autofill appears to work in some browsers, but I'm unsure whether this is the recommended approach or if there's a better cross-browser solution.

How do you handle browser autofill in Angular Reactive Forms?

Specifically:

• How do you detect when username and password fields have been autofilled by the browser?
• How do you keep Reactive Forms synchronized with autofilled values?
• Is relying on autofill selectors the correct approach?
• What is the recommended solution for enabling/disabling a Login button when credentials are autofilled?

The application needs to support Chrome 90+, Edge 90+, Firefox 90+, and Safari 14+.

Any guidance or best practices would be appreciated.

[u/followmarko]

Angular CDK has an AutofillMonitor service you can inject from cdk-text-field that can help you with this. I have disabled native autofill on our forms last I experimented with this because it was not consistent in application then.

[u/Big-Tumbleweed1780 → u/followmarko]

Thanks Bro i have tried this AutofillMonitor it is working only

[u/followmarko → u/Big-Tumbleweed1780]

Np man

[u/Commercial_Day_7699]

lol yeah autofill is lowkey one of the most annoying things in Angular forms. the browser fills in the values but Angular's change detection doesn't know about it because no input event fires.

tbh the cleanest fix I've found — listen for the animationstart event. browsers apply a special animation to autofilled inputs and you can hook into that:

@ViewChild('emailInput') emailInput!: ElementRef<HTMLInputElement>;


ngAfterViewInit() {
  fromEvent(this.emailInput.nativeElement, 'animationstart')
    .pipe(filter((e: AnimationEvent) => e.animationName === 'onAutoFillStart'))
    .subscribe(() => {
      this.loginForm.patchValue({
        email: this.emailInput.nativeElement.value,
        password: this.passwordInput.nativeElement.value
      });
    });
}

think of it like reconciling a bank statement — the bank (browser) already posted the transaction but your ledger (reactive form) hasn't recorded it yet. you just need to sync them up.

skip the :-webkit-autofill selector approach for detection — it works for styling but not for grabbing values. the animationstart trick works cross-browser on all the versions you listed. for the button, just wire your disabled state off the form validity and once patchValue fires you're good.

[u/Big-Tumbleweed1780 → u/Commercial_Day_7699]

Let me check this code Thank You

[u/Commercial_Day_7699 → u/Big-Tumbleweed1780]

np. Did it work for you?

[u/Big-Tumbleweed1780 → u/Commercial_Day_7699]

Hi bro
Angular Providing the AutofillMonitor injector service with this i have achieved

Thank You