Why does Chrome autofill not work on Angular?

Chrome writes a field's value directly to the DOM, skipping the events Angular's NgModel and FormControl listen for. Angular's state never updates, so validation and submission still see an empty field even though the field looks filled.

Why is my Angular submit button still disabled after autofill?

The button is gated on Angular form validity, not the visible DOM value. Autofill changed the pixels but not Angular's model, so required validators still see an empty value and keep the form invalid.

Does adding autocomplete attributes fix Angular autofill?

It helps the browser and assistive tech identify the field per WCAG 1.3.5, but it does not change the event Chrome fires after filling. Angular still misses the update, so the attribute alone does not fix it.

Do I need to write code to use QuickForm?

No. Record Mode captures your keystrokes as you fill the form once, then replays them with the input and change events Angular expects. No native-setter code, no CSS selectors, no config files.

Chrome Autofill Not Working on Angular? How to Fix It

Angular stood at 50% usage among front-end developers in the State of JS 2024 survey (State of JS, "State of JavaScript 2024: Front-end Frameworks"), a signal of how broadly deployed Angular forms are across the web. Yet Chrome's built-in autofill, designed for static HTML, quietly fails on Angular's reactive and template-driven inputs: the field looks filled, the user moves to submit, and nothing goes through. The value never landed in Angular's state.

Key Takeaways

Chrome writes a field's .value directly to the DOM. Angular's NgModel and FormControl only update from events dispatched inside the Angular zone, so the direct write is invisible to Angular.

Angular reached 50% usage in the State of JS 2024 survey, with 54% retention, meaning this hits a large, sticky community of enterprise developers.

You can fix it in code by using the native value setter, then dispatching both an input and a change event to satisfy NgModel.

The autocomplete attribute aids accessibility and credential matching but does not change which event Chrome fires after filling.

Across 93 million tracked sessions, the average form completes just 51.7% of the time (Zuko, "25 Conversion Rate Statistics You Need"). Silent autofill failure drives exactly that kind of drop-off.

Why does Chrome autofill fail on Angular?

The failure is an event-timing mismatch, not a bug in either tool. Angular's NgModel directive keeps two-way binding alive by listening for specific DOM events. Reactive forms listen for input; template-driven forms using NgModel sync on both input and change. Chrome's autofill skips all of that: it writes straight to the DOM node's .value property and fires neither event inside Angular's zone. Zone.js never detects the write, change detection never runs for that field, and Angular's model stays at its previous empty value.

This is why "the field shows my address but the form won't submit" is the signature Angular autofill symptom. The DOM and Angular's internal state have diverged. No Angular patch or Chrome release will automatically reconcile them, because the two systems were not designed to cooperate. The same root mismatch explains why autofill also breaks on React and Vue.

How do you fix Angular autofill in code?

If you control the page, you can bridge the gap with the same native-setter technique used in React, plus the additional change event that NgModel also watches:

const input = document.querySelector("#email")
// Angular overrides the value setter, so reach the native one:
const nativeSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, "value").set
nativeSetter.call(input, "[email protected]")
input.dispatchEvent(new Event("input", { bubbles: true }))
input.dispatchEvent(new Event("change", { bubbles: true })) // NgModel also syncs on change

The two-event approach matters for Angular specifically. Reactive forms using FormControl will sync on input alone, but template-driven forms with NgModel also require change. Firing both covers the full surface without any ChangeDetectorRef gymnastics.

Does the autocomplete attribute fix it?

Not on its own. Adding autocomplete="email" is still worth doing: W3C's WCAG 2.2 criterion 1.3.5 Identify Input Purpose recommends it so assistive tech and password managers can identify the field's purpose, which helps users with cognitive and motor needs (W3C, "Understanding SC 1.3.5: Identify Input Purpose (WCAG 2.2)"). But the attribute only tells the browser what a field is for. It does not change which event Chrome dispatches after filling, so Angular's state problem remains untouched. Combine it with the native-setter fix, not instead of it.

What does broken Angular autofill cost your users?

Friction at the form is where conversions die. Across 93 million tracked sessions, Zuko found the average online form completes just 51.7% of the time, and form length is the single reason cited by 27% of people who quit (Zuko, "25 Conversion Rate Statistics You Need", 2025). Angular is common in enterprise and B2B products where users fill the same forms repeatedly and depend on autofill to speed that up. When autofill silently fails, every field becomes manual again, which is exactly the effort that pushes completion rates down.

The no-code fix: QuickForm Record Mode

Not everyone owns the page, and not every team wants to patch forms across a large Angular app. A dedicated autofill extension for Angular does the same job as the snippet above without touching application code. QuickForm's Record Mode captures your real keystrokes once, then replays them through the same native-setter-plus-input-plus-change path Angular expects. Both NgModel and FormControl update, validation runs, and the submit button enables, exactly as if you had typed.

Fill Angular forms in one click, free

No account required. Works in 60 seconds.

Add to Chrome, it's free

50,000+ users · 4.2 stars

Setting it up takes about a minute:

Install QuickForm from the Chrome Web Store (free, no account needed)
Open the Angular form you want to autofill
Click the QuickForm icon, then enable Record Mode
Fill the form once, normally. QuickForm captures every field
Save the profile and give it a name
Next time, click the profile and the whole form fills in one click, using the events Angular recognises