Angular 2和浏览器自动填充

Question

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

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:"email@email.com",密码:""}',因此按钮"login"被禁用.但是,如果我点击页面上的某个地方,它会触发onValueChanged,我会看到'{userName:"email@email.com",密码:"123456"}',并启用按钮"login".

如果我进入隐身模式.我没有预先填充的字段(它们是空的),但是当我填充(选择)值时,在控制台中我看到'{userName:"email@email.com",密码:"123456"}'和按钮"login"无需任何额外点击即可启用.

可能是他们不同的事件？自动填充和自动填充？角度与它们的作用有何不同？

解决它的最佳方法是什么？为什么onValueChanged函数只在浏览器自动填充字段时执行一次？

Answer 1

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

1. 删除密码字段的验证;
2. 禁用密码自动完成.

Answer 2

我发现你可以使用 autocomplete="new-password"

如此处所述

这样，您的密码字段将完全不会自动填充，这就是我的情况。上面的链接中还有许多其他自动完成属性。