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]", password: "" }' 因此按钮登录"被禁用.但是如果我点击页面上的某个地方，它会触发 onValueChanged 并且我看到 '{ userName: "[e-mail]", password: "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]", password: "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.

可能是不同的事件?自动填充和自动完成?angular 对它们的处理方式不同吗?

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屋！