question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

forms: update required validator when input is autofilled

See original GitHub issue

πŸš€ feature request

Relevant Package

This feature request is for @angular/forms

Description

The RequiredValidator does not update its validation status when an input is autofilled in Chrome. This is problematic for users who set up a required username and password input and then conditionally enable the submit button when the inputs are valid. The user sees:

  1. Page loads
  2. Inputs are autofilled with username and password
  3. Submit button is still disabled.

This issue has been filed in the past on the components repo: https://github.com/angular/components/issues/3414, though the change would really have to happen in @angular/forms.

Describe the solution you’d like

@angular/cdk has an AutofillMonitor that could be moved to @angular/forms and used to detect when an input is autofilled.

Describe alternatives you’ve considered

It is possible to monkey patch a solution, as @kherock demonstrated on the components issue.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:39
  • Comments:20 (6 by maintainers)

github_iconTop GitHub Comments

14reactions
mrmokwacommented, Jun 28, 2021

Why is it marked as feature? IMO it’s a bug and shouldn’t need votes to fix it.

7reactions
f1ght4funcommented, Feb 23, 2022

Nothing is helping. No matter whether u have a form or u use ngModel, whether u put all these directives floating around internet posts with autofillmonitor or with directives to react on input change. UNLESS you really tap ie focus/touch input - value does not appear. Mind you i have everything setup - associated domains, webcredentials etc

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular 9 - Form not valid onInit if input autofilled by Browser
So the checkAndLoadUserInfo() should not require a parameter. ... Both ways will trigger validation and update the form's state.
Read more >
Autofill - web.dev
Ensure autofill works for all your fields #​​ Found an appropriate value for your form field? Add it. Using suitable values for the...
Read more >
4.10 Forms - HTML Standard - whatwg
The simplest annotation is the required attribute, which can be specified on input elements to indicate that the form is not to be...
Read more >
950510 - Firefox autofill doesn't trigger updating in Angular
Actual results: The textbox autofills, but the framework cannot detect this, and so it never picks up the change. Expected results: Firefox should...
Read more >
How to trigger input field change with Google Chrome autofill ...
<form class="needs-validation"> <div class="form-group"> <input v-model="form.first_name" type="text" class="form-control" required>Β ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found