Angular 2 - Form is invalid when browser autofill

问题:

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?

回答1:

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

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

Chrome 67.0.3396.99, Angular 5.1.0

回答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

回答3:

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:

• https://angular.io/api/core/ChangeDetectorRef
• Angular 2 change event on every keypress

Best wishes

回答4:

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.

回答5:

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>

回答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" />

回答7:

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