43

I have a Login Form which has email and password fields.

I've chosen for browser autofill.

The problems is: When browser autofills login form, both fields are pristine and untouched, so the submit button is disabled.

If I click on disabled button, it enables and fires submit action, what is nice. But the default disabled aspect is pretty bad what can make some users disappointed.

Do you have some ideas about how to deal with?

5
  • 1
    were you able to solve the issue?
    – JohnDizzle
    Oct 23, 2017 at 13:25
  • @JohnDizzle: Did you guys able to get it work? if yes then how? :)
    – Denish
    Feb 27, 2018 at 8:39
  • @Denish No, I must disappoint you. This seems to be an open problem for everyone in the community...
    – JohnDizzle
    Feb 27, 2018 at 9:38
  • @Denish, If you have a reactive form, then something like [disabled]="user.invalid" should work
    – Vega
    Apr 4, 2018 at 17:43
  • It might be related to this issue here: The autofill values only become available after user interacts with the form: github.com/angular/material2/issues/3414 Aug 31, 2018 at 9:59

9 Answers 9

6

I solved it by also checking if the form was touched when displaying error messages. So, for example, the submit button looks like this

<input type="submit" class="btn btn-default" [disabled]="loginFormGroup.invalid && loginFormGroup.touched" />
2
  • 2
    So the button will still be activated if the fields are empty when the page load with this solution
    – Mattew Eon
    Jul 15, 2022 at 15:34
  • This is the most elegant, and error-proof declarative solution, imho
    – Janos
    Dec 6, 2022 at 8:22
4

I seem to have solved this by just simulating a click on the page AfterViewInit.

Js :

public ngAfterViewInit(): void {
    document.querySelector('body').click();
}

With JQuery :

public ngAfterViewInit(): void {
    $('body').click();
}

Chrome 67.0.3396.99, Angular 5.1.0

2

I solved this problem with the ChangeDetectorRef Provider.
Simply do a manual detectChanges() before you check if the input is valid.

If you aren't able to check after a button click, then hear on the Input-Event of the Input-Element with the event-binding (input)=changedetectorfunc() and call the changeDetector in this function.
Therefore it must work.
Hope, it helps you.

useful links:

Best wishes

0

There are two ways to solve this problem

  • Use CSS pseudo class -webkit-autofill it will detect the autofill.

https://developer.mozilla.org/en-US/docs/Web/CSS/:aut

  • Use AutofillMonitor package from angular/cdk module which monkey patch the Validators Since RequiredValidator is not able to acknowledge autofill input.

https://gist.github.com/kherock/fad4c320c5894ec68373588e338955c5

0

SOLUTION

When you look at a field in your form page source code for example a login username input field - do you see a class called 'cdk-text-field-autofilled'.

I am not up to speed on this cdk field monitoring whether all angular applications use it or not but the project I am working on today has.

<input _ngcontent-vio-c24="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored cdk-text-field-autofilled ng-dirty ng-valid ng-touched" formcontrolname="username" id="username" matinput="" placeholder="Username" aria-invalid="false" aria-required="false">

So if useful to anyone ie you have this class or something similar denoting autofill, this is what i did:

HTML

Added #username to input field if not already there:

<input matInput placeholder="{{'labels.Logon.Username' | translate}}" formControlName="username" id="username" #username>

Added rule or another rule to the button [disabled] - new && notAutofilled in my project other 2 already there:

 [disabled]="(loginForm.invalid || loggingIn) && notAutofilled"

TYPESCRIPT

Added relevant imports 'ViewChild, ElementRef, AfterViewInit,' if not already there:

import {Component, Input, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy} from '@angular/core';

Added export class AfterViewInit:

export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {

Added variables:

@ViewChild('username') userName: ElementRef;
public notAutofilled = true;

Created ngAfterViewInit on a SetTimeOut:

ngAfterViewInit(){
    setTimeout(() => {
    if (this.userName.nativeElement.classList.contains('cdk-text-field-autofilled')) {
        this.notAutofilled = false;   
    }
    else{console.log("Not Autofilled");}
    }, 500);
  }
-2

I had the same problem.

I solved it by: - removing the Validators.required validator for the password field in the component - using the <input ... required ...> directive at the tag in the template

-2

this is not the best practice for code but it will work for sure-

if you are having two way binding then its very easy task just check for length of both textbox if it is greater then zero then return false else return true and call the method in disabled attribute. Method-

    validcheck() {
         return username.length <= 0 || password.length <= 0;     
    }

and call the method inside button disabled attribute

    <button [disabled]="validcheck()">Submit</button>
-3

Had the same problem too. I'm not sure if this is the best way, but I was able to get it to work by adding AfterViewChecked

import { Component, AfterViewChecked } from "@angular/core";

export class LoginComponent implements AfterViewChecked {
    // Beware! Called frequently!
    // Called in every change detection cycle anywhere on the page
    ngAfterViewChecked() {
        console.log(`AfterViewChecked`);
        if (this.usr.userName) {
            // enable to button here.
            console.log("found username in AfterViewChecked");
        }
    }
}

or you might be able to try Angular2's other Lifecycle Hooks https://embed.plnkr.co/?show=preview

1
  • 1
    That will enable the button but the form itself will still be invalid, so submission will not go through.
    – Euridice01
    Feb 13, 2017 at 5:42
-3

According to the offical docs

"pristine" means the user hasn't changed the value since it was displayed in this form

So if you have a validation in your form it's a better approach to check if the form is "valid" or "invalid"

<button [disabled]="formName.invalid">Submit</button>

So it doesn't matter if the form is pristine or not.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.