如何在角度應用程序中啟用表單自動完成

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/