在开发 Angular 项目时如何防止表单字段自动填充？

Question

我目前正在使用 Angular 开发一个 Web 应用程序，并且遇到了表单字段自动填充的问题。每当我测试表单时，尤其是在 Chrome 中，浏览器都会使用保存的信息自动填充某些字段，这会干扰我的测试过程，并分散用户填写正确数据的注意力。

我尝试在表单字段上将自动完成属性设置为“关闭”，但它似乎工作不可靠。有没有更有效的方法来防止 Angular 中的自动填充？有没有更可靠的方法来防止 Angular Reactive 表单中的自动填充？是否有任何特定于 Angular 的技术或最佳实践来处理此问题？我愿意接受任何建议或见解。谢谢您的帮助！

Answer 1

只需在输入字段中添加具有不同值的属性名称即可。在下面的示例中，我添加了

name="firstname"

。

<mat-form-field>
  <mat-label>First Name:</mat-label>
  <input matInput name="firstname">
</mat-form-field>

此外，如果您在项目中多次使用同一字段，您可以更改它，例如

name="fname"

。