Question

我有一个登录表单，其中包含电子邮件和密码字段。

我已选择使用浏览器自动填充功能。

问题是：当浏览器自动填充登录表单时，这两个字段都是原始且未触及的，因此提交按钮被禁用。

如果我点击禁用按钮，它会启用并触发提交操作，这很好。但是默认的禁用方面非常糟糕，可能会让一些用户感到失望。

您对如何处理有一些想法吗？

Answer 1

我似乎仅通过模拟页面AfterViewInit上的点击即可解决此问题。

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

Chrome 67.0.3396.99，Angular 5.1.0

Answer 2

我通过ChangeDetectorRef提供程序解决了这个问题。
在检查输入是否有效之前，只需执行手册detectChanges()。

如果单击按钮后仍无法检查，请收听带有事件绑定(input)=changedetectorfunc()的Input-Element的Input-Event并在此函数中调用changeDetector。
因此必须工作。
希望对您有帮助。

有用的链接：

最美好的祝愿

Answer 3

我遇到了同样的问题。

我通过以下方式解决了： - 删除组件中密码字段的server { listen ...; ... location /a1b2c3 { proxy_pass http://a1b2c3:8080; } location /a2b1c4 { proxy_pass http://a2b1c4:8080; } ... }验证程序 - 在模板中的标签处使用Validators.required指令

Answer 4

根据官方文件

"pristine" means the user hasn't changed the value since it was displayed in this form

因此，如果您在表单中进行了验证，则可以更好地检查表单是否有效＆＃34;或＆＃34;无效＆＃34;

<button [disabled]="formName.invalid">Submit</button>

因此，如果表格是原始的，那也无关紧要。

Answer 5

这不是代码的最佳实践，但它肯定会起作用 -

如果你有双向绑定那么它非常容易的任务只检查两个文本框的长度，如果它大于零然后返回false否则返回true并在禁用属性中调用方法。方法 -

    validcheck() {
         return username.length <= 0 || password.length <= 0;     
    }

并调用按钮禁用属性

内的方法

    <button [disabled]="validcheck()">Submit</button>

Answer 6

我也通过检查显示错误消息时是否触摸了表格来解决了该问题。因此，例如，“提交”按钮看起来像这样

<input type="submit" class="btn btn-default" [disabled]="loginFormGroup.invalid && loginFormGroup.touched" />

Answer 7

也有同样的问题。我不确定这是不是最好的方法，但我可以通过添加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");
        }
    }
}

或者您也许可以尝试Angular2的其他Lifecycle Hooks https://embed.plnkr.co/?show=preview

Angular 2 - 表单在浏览器自动填充时无效

7 个答案: