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>

I think is because autocomplete="email" should be autocomplete="on" — mejiajuanbta
– mejiajuanbta, Commented Mar 9, 2018 at 2:14

Narm · Accepted Answer · 2018-03-09 02:29:12Z

2

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"/>

answered Mar 9, 2018 at 2:29

Narm

10.9k5 gold badges46 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tony Brasunas · Accepted Answer · 2018-03-09 04:46:52Z

0

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/

edited Mar 9, 2018 at 4:46

answered Mar 9, 2018 at 4:17

Tony Brasunas

4,6613 gold badges48 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to enable form autocomplete in angular application

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related