CODEWITHSUNDEEP
angular4-forms
davidmr
davidmr

Reputation: 115

angular 4 reactive forms with material 2, disabling autocomplete

I'm using angular cli, angular 4 and angular material 2. I need to disable chrome autocomplete, but I'm not being able to do so.

I already searched and found out that I need to add autocomplete=off or autocomplete=false both in the form and the input. I've also found a workaround by adding type="search". None of them seems to work.

Is material or angular overrinding this instructions?

I'm using reactive forms!

Any sugestions?

Thanks in advance by your help

Upvotes: 2

Views: 3401

Answers (2)

Phat Tran
Phat Tran

Reputation: 3870

Just assign the attribute autocomplete to something else

enter image description here

Upvotes: 0

SimplySpoons
SimplySpoons

Reputation: 113

Chrome no longer supports autocomplete="off" (Chrome stopped supporting this in 34.0). Instead, use autocomplete="new-password" instead. You can check out Mozilla's documentation on this here

From the documentation:

For this reason, many modern browsers do not support autocomplete="off" for login fields:

If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page. This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.

Example:

<mat-form-field *ngIf="filter.editorType==='text'">
    <input matInput autocomplete="new-password"
    [formControlName]="filter.id" 
    [placeholder]="filter.name" 
    (keyup.enter)="onApplyFiltersKeyboard()">
</mat-form-field>

Upvotes: 6

Related Questions