Angular 2 和浏览器自动填充

我正在使用 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: "[电子邮件受保护] /cdn-cgi/l/email-protection", 密码: "" }' 结果按钮“登录”被禁用。但是如果我单击页面上的某个位置它会触发值改变时我看到'{ 用户名： ”[电子邮件受保护] /cdn-cgi/l/email-protection”，密码：“123456”}'，并且“登录”按钮已启用。

如果我进入隐身模式。我没有预填充字段（它们是空的），但是当我填充（选择）值时，然后在控制台中我看到'{ 用户名： ”[电子邮件受保护] /cdn-cgi/l/email-protection”，密码：“123456”}'，并且无需任何额外的点击即可启用“登录”按钮。

也许它们是不同的事件？自动填充和自动完成？ Angular 与它们的工作方式不同吗？

解决这个问题的最佳方法是什么？以及为什么值改变时当浏览器自动填充字段时，函数仅执行一次？

Chrome 浏览器中的问题：自动填充后（用户点击页面之前）不允许访问密码字段的值。所以，有两种方法：

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