如何在角度应用程序中启用表单自动完成

Question

我将应用程序迁移到Angular，现在返回页面访问后它不会自动完成表单。 否则，它会很好地工作。

我的直觉是它与* ngIf模板表达式以及Angular的一般非静态性质有关，但是我想知道是否可以做些什么使表格自动填充？

login.component.html：

<div class="container">
  <div class="row">
    <div class="col">
      <hr>
      <form autocomplete="on">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email address" name="email" required [(ngModel)]="email" autocomplete="email"/>
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" name="password" required [(ngModel)]="pass" />
        </div>
        <hr>
        <div class="form-group">
          <button (click)="Register()">Register</button>
          <button (click)="Login()">Sign In</button>
        </div>
      </form>
    </div>
  </div>
</div>

app.component.html：

<app-login *ngIf="!loggedIn"></app-login>

Answer 1

输入属性autocomplete只有on和off两个值。 要启用自动完成功能，您需要使用autocomplete="on" 。 您的代码应如下所示：

<input type="email" class="form-control" placeholder="Email address" name="email" required [(ngModel)]="email" autocomplete="on"/>

Answer 2

您已经将autocomplete正确设置为input元素的html属性，但是将其设置为等于"email" ，这不是有效值。

查看有关自动完成的文档 。

如果将autocomplete="on"设置autocomplete="on"您的代码，则可以使用。

处理此更改的代码： https : //jsfiddle.net/pdzb02yk/2/