CODEWITHSUNDEEP
angular
Reed
Reed

Reputation: 1642

How to enable form autocomplete in angular application

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>

Upvotes: 2

Views: 10090

Answers (2)

Tony Brasunas
Tony Brasunas

Reputation: 4582

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/

Upvotes: 0

Narm
Narm

Reputation: 10844

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

Upvotes: 2

Related Questions