Browser does not ask to save password Angular application

Question

I am working on an Angular application that starts with a login portal. I am using the following template for my login screen:

login.html

    <form method="post" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
      <fieldset>
        <p>
          <label>Username</label>
          <input type="text" placeholder="e.g. JohnDoe" [(ngModel)]="model.username" #username="ngModel"
                 name="username" required/>
        </p>

        <p [ngClass]="{ 'has-error': f.submitted && !password.valid }">
          <label>Password</label>
          <input type="password" placeholder="Password" name="password" [(ngModel)]="model.password"
                 #password="ngModel" required/>
        </p>
        <p>
        <input type="submit" [disabled]="loading" class="btn" value="Login">
        </p>
      </fieldset>
    </form>

Unfortunately, whenever a user is logged in, the password manager of Chrome does not ask to store the credentials. Password managers like Lastpass however do offer to store it. What could I improve to fix this?

Answer 1

It used to be the case (when this question was originally asked) that if you turned on the Chrome flag chrome://flags/#enable-password-force-saving then you get a key icon in the address bar whenever a form is visible. Clicking this would force the 'save password' bubble to pop up.

It appears that (as of 3rd November 2020) this flag has been removed so this is no longer possible.

From Techradar but copied here to prevent link rot: Chrome Flags are experimental features that aren't yet part of the browser by default, but can be enabled with a couple of clicks. They're simple to use and can transform the way you browse the web.

To access the Flags menu, type chrome://flags into the address bar and hit Enter. Here, you'll see a long list of options, each of which has a drop-down menu that can be set to Default, Enabled or Disabled. There are lots of them, so the best way to find the one you want is to hit Ctrl+F and search for it.

Once you've enabled a Flag, you'll be prompted to re-launch your browser to activate it. This will close and re-open all your current browser windows, so make sure you've saved anything you're working on.

The tools here are still in testing, and aren't necessarily stable. There's also a possibility, however small, of security issues. If that's something you can live with, there are some real gems on offer.

Answer 2

You might want to look at this: Angularjs Chrome autocomplete dilemma

and also Fixing autocomplete (autofill) on Angular and don't miss this one AngularJS browser autofill workaround by using a directive

All you need is a custom directive to handle that situation.

Hope that Helps !

Thank You !