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

Posted 2023-03-13

【中文标题】Angular 2 - 浏览器自动填充时表单无效

【英文标题】：Angular 2 - Form is invalid when browser autofill

【发布时间】：2017-04-09 04:08:06

【问题描述】：

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

我已选择浏览器自动填充。

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

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

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

【问题讨论】：

你能解决这个问题吗？

@JohnDizzle：你们成功了吗？如果是，那怎么办？ :)

@Denish 不，我必须让你失望。对于社区中的每个人来说，这似乎都是一个悬而未决的问题......

@Denish，如果你有一个反应形式，那么像 [disabled]="user.invalid" 这样的东西应该可以工作

这里可能与这个问题有关：自动填充值只有在用户与表单交互后才可用：github.com/angular/material2/issues/3414

【参考方案1】：

有两种方法可以解决这个问题

使用 CSS 伪类 -webkit-autofill 它会检测到自动填充。

https://developer.mozilla.org/en-US/docs/Web/CSS/:aut

使用来自 angular/cdk 模块的 AutofillMonitor 包，该包对验证器进行猴子补丁，因为 RequiredValidator 无法确认自动填充输入。

https://gist.github.com/kherock/fad4c320c5894ec68373588e338955c5

【参考方案2】：

我通过在显示错误消息时检查表单是否被触摸来解决它。 因此，例如，提交按钮看起来像这样

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

【参考方案3】：

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

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

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

并调用按钮禁用属性中的方法

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

【参考方案4】：

我用ChangeDetectorRef Provider 解决了这个问题。 在检查输入是否有效之前，只需手动执行detectChanges()。

如果您在单击按钮后无法检查，则使用事件绑定 (input)=changedetectorfunc() 听到输入元素的输入事件，并在此函数中调用 changeDetector。 因此它必须工作。 希望对你有帮助。

有用的链接：

https://angular.io/api/core/ChangeDetectorRef Angular 2 change event on every keypress

最好的祝福

【参考方案5】：

我似乎已经通过模拟点击页面AfterViewInit来解决这个问题。

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

Chrome 67.0.3396.99、Angular 5.1.0

【参考方案6】：

根据官方文档

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

因此，如果您的表单中有验证，那么检查表单是“有效”还是“无效”是一种更好的方法

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

所以形式是否原始并不重要。

【参考方案7】：

我遇到了同样的问题。

我通过以下方式解决了它： - 删除组件中密码字段的Validators.required 验证器 - 在模板中的标记处使用<input ... required ...> 指令

【参考方案8】：

也有同样的问题。我不确定这是否是最好的方法，但我可以通过添加 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 的其他生命周期钩子 https://embed.plnkr.co/?show=preview

【讨论】：

这将启用按钮，但表单本身仍然无效，因此提交不会通过。