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

我将一个应用程序迁移到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-login *ngIf="!loggedIn"></app-login>

登记
登录

app.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-login *ngIf="!loggedIn"></app-login>

---

输入属性

自动完成

只有两个值

打开

和

关闭

。要启用自动完成，您需要使用

autocomplete=“on”

。您的代码应该如下所示：

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

---

您已将

自动完成

正确设置为

输入

元素的html属性，但您已将其设置为等于

“email”

，该值无效

回顾历史

如果您设置

autocomplete=“on”

您的代码将正常工作

---

处理此更改的代码：

我认为是因为autocomplete=“email”应该是autocomplete=“on”