Angular 2和浏览器自动填充 [英] Angular 2 and browser autofill

问题描述

我正在用Angular反应形式实现登录页面.如果表单无效，则禁用登录"按钮.

I'm implementing login page with Angular reactive forms. Button "login" is disabled if form is invalid.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'signin',
    templateUrl: './signin.component.html'
})
export class SignInComponent implements OnInit {
    private signInForm: FormGroup;

    constructor(private formBuilder: FormBuilder) { }

    ngOnInit() {
        this.buildForm();
    }

    private buildForm(): void {
        this.signInForm = this.formBuilder.group({
            userName: ['', [Validators.required, Validators.maxLength(50)]],
            password: ['', [Validators.required, Validators.maxLength(50)]]
        });

        this.signInForm.valueChanges
            .subscribe((data: any) => this.onValueChanged(data));

        this.onValueChanged();
    }

    private onValueChanged(data?: any) {
        console.log(data);
    }

因此，当我在浏览器中启动它时，我已经预填充了字段"userName"和"passwords".并且在控制台中，我有值'{userName:"[e-mail]"，密码:"}，因此禁用了登录"按钮.但是，如果我单击页面上的某处，它会触发 onValueChanged ，并且会看到'{userName:"[e-mail]"，密码:"123456"}'和按钮登录".

So, when I launch it in browser, I have prepopulated fields "userName" and "passwords". And in console I have values '{ userName: "[e-mail]", password: "" }' and as a result button "login" is disabled. But if I click somewhere on page it trigger onValueChanged and I see '{ userName: "[e-mail]", password: "123456" }', and button "login" is enabled.

如果我进入隐身模式.我没有预填充的字段(它们为空)，但是当填充(选择)值时，然后在控制台中看到'{userName:"[e-mail]"，密码:"123456"}'，然后启用登录"按钮，而无需额外点击.

If I go in incognito mode. I have no prepopulated fields (they are empty), but when I populate (select) values, then in console I see '{ userName: "[e-mail]", password: "123456" }', and button "login" is enabled without any extra click.

它们可能是不同的事件吗?自动填充和自动完成?棱角分明地与他们合作的方式不同吗?

May be they are different events? Autofill and autocomplete? And angular works with them differently?

解决此问题的最佳方法是什么?为什么 onValueChanged 函数在浏览器自动填充字段仅执行一次?

What is the best way to resolve it? And why onValueChanged function is executed only once when browser autofill fields?

推荐答案

Chrome浏览器中的问题:自动填充后(在用户单击页面之前)不允许访问密码字段的值.因此，有两种方法:

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. 删除密码字段的验证；
2. 禁用密码自动填充.

这篇关于Angular 2和浏览器自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！