keeping google from autofilling forms in Angular2

Question

We have a configuration page where the user configures an email server. For some reason chrome starts autofilling random fields. We tried adding a name attribute or an id attribute with a random string but google still autofills these fields. Our fields look like this

        <div class="formRow row">
            <div class="col-md-2">
                <div class="formLabel" style="width:100%">{{"GENERAL.SMTP_SERVER" | translate}}</div>
            </div>
            <div class="col-md-3">
                <input  formControlName="SmtpServer" style="width:100%;" autocomplete="off">
            </div>
            <div class="formLabel col-md-1">Port</div>
            <div class="col-md-1">
                <input formControlName="SmtpServerPort">
            </div>
        </div>

It changes the fields and the customer saves the data without realizing the fields are being changed. What's the best way to stop this.

You are looking for this `autocomplete="new-password"` ; `autocomplete="off"` is for text prediction. — Ploppy, Jul 11 '18 at 16:48

Kim Kern · Answer 1 · 2018-07-11T16:58:33.643

2

Just add autocomplete="off" to your inputs. If this does not work, you can try using an invalid value like autocomplete="nope", as suggested in the mdn docs.

In some cases, the browser will continue suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really enforcing non-autocompletion is to assign an invalid value to the attribute.

You can try autocomplete="new-password" as well but sometimes you will just not be able to convince the browser not to offer autocompletion, especially for login credentials (username/password).

edited Jul 11 '18 at 16:58

answered Jul 11 '18 at 16:30

Kim Kern

54,283
17
197
195

That doesn't works for me in Angular6 using chrome as browser – Osakr Jul 11 '18 at 16:35
You can try `autocomplete="new-password"` as well but sometimes you will just not be able to convince the browser not to offer autocompletion, especially for login credentials (username/password). – Kim Kern Jul 11 '18 at 16:44
1

@KimKern yeah, I was writing another answer but feel free to do it. – Ploppy Jul 11 '18 at 16:45
`autocomplete="new-password"` is not about autofill but rather about prediction of values. – Ploppy Jul 11 '18 at 16:45

score 0 · Answer 2 · answered Jul 11 '18 at 17:06

0

Use random field names.

Google might try to fill in SmtpServer, but has no idea how to fill in "12bc234ee".

While you can ask the browsers to not fill in the fields, the only way to be sure is to create fields it doesn't have data for.

answered Jul 11 '18 at 17:06

Terry Carmen

3,720
1
16
32

keeping google from autofilling forms in Angular2

2 Answers2