How to enable form autocomplete in angular application

Question

I migrated an app to Angular and now it does not autocomplete the form upon returning page visits. Otherwise it works perfectly fine.

My gut feeling is that it has to do with the *ngIf template expressions and just the general non-static nature of Angular but I'm wondering if there's anything I can do to perhaps enable the form to autofill?

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

The input attriubte autocomplete has only two values on and off . To enable autocomplete you would want to use autocomplete="on" . Your code should look like the following:

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

Answer 2

You have autocomplete set up properly as an html attribute of your input element, but you've set it equal to "email" , which is not a valid value.

Review the documentation on autocomplete .

If you set autocomplete="on" your code will work.

The code working with this change: https://jsfiddle.net/pdzb02yk/2/