bug(input): Chrome autofill should set the form to valid

[dahaupt]

Bug, feature request, or proposal:

Probably a bug, but standard HTML input has the same issue in Chrome. Maybe anyone has an idea for a workaround.

What is the expected behavior?

Form changes state to valid if the autofill of Chrome fills input fields.

What is the current behavior?

You have to click inside the form / app to activate the autofill value and the state of the form changes to valid.

What are the steps to reproduce?

Plunker not possible, screenshot right after the start of the app:

This is only happening at the initial start of the app!

What is the use-case or motivation for changing an existing behavior?

Changing the state of the form to valid if the autofill value of Chrome is passed in.

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.4.9,
Google Chrome 56
Material Beta 2
Windows 10

Is there anything else we should know?

I'm not sure if anyone else noticed this. It's not that bad but it looks confusing.

[dahaupt]

I've read this on stackoverflow and @mmalerba already mentioned something in that direction.

The problem in Chrome browser: it does not allow access to the value of the password field after autofill (before user click on the page). So, there are two ways:

1. remove validation of the password field;
2. disable password autocompletion.

If nobody else has an idea I will close this and remove the validation because I think that's the best thing atm for login pages (in Google Chrome!).

[mmalerba]

@dahaupt another idea would be to add validation only after the user interacts in some way (focus or input event maybe)

[wautersj]

@mmalerba Yes, That's how I usually take care of it.
Example: Never disable the login button based on validation, and when the login button is pressed it either redirects the user after successful login, or I show validation feedback.

Yet again. It's an issue that needs to be addressed.

[murilobd]

I'm on Angular 4 with Material Beta 8 and still facing this issue!

[AbakumovAlexandr]

Why was this closed?

Still not resolved in Angular Material 5.1.1.

[denishvachhani]

I am facing same issue with Angular 5.1.2 - Would like to know if you anyone has figured out this one?

[tadamczak]

Vote to reopen :)

[mmalerba]

I've added some utilities for dealing with chrome autofill, they're available in 6.0.0-beta.2 https://github.com/angular/material2/blob/6.0.0-beta-2/src/lib/input/autofill.ts I would hold off on using it just yet though, the whole thing is being moved into the CDK soon: #9831

The AutofillMonitor detects when a field becomes autofilled, so you should be able to listen for that and re-check the validation.

[MarkPieszak]

@mmalerba Is there any chance this is going into a patched minor version of 5.x or is it only going to be available when 6.0 comes out?

[kostia-lev]

https://github.com/angular/material2/blob/master/src/material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.html

cannot make autofill work, ngoninit - form is not on the page yet, afterwards, it does not react on autofill event on chrome:-(, checked on angular 6, material 6

[rams-fullstack]

Is there any work around for this issue? to make form valid when chrome autofill the fields

[kevcjones-archived]

I'm just here for a solution but issue is on my project too. I'll be checking some SO suggestions like emitting an event in ngAfterViewInit to trigger change detection maybe? Or simulation of click.. same idea

[kherock]

So I've found that the main issue here is that Angular's RequiredValidator doesn't acknowledge inputs with autofilled input before the user has interacted with the page. The proper fix would probably need to be implemented in @angular/forms.

Regardless here's the workaround I've come up with that works pretty flawlessly:
https://gist.github.com/kherock/fad4c320c5894ec68373588e338955c5

[jagshub]

@kherock I tried the above gist, Inside ngOnInit this._elementRef.nativeElement.value does not get the value still !
so i did tried "this._valueAccessor.onChange('dummy_trigger')" and that enabled the submit button and did not alter the input texts, so it works that way. but i dont know what's happening.