CODEWITHSUNDEEP
angulartypescriptangular-forms
saravanam cs
saravanam cs

Reputation: 421

For Angular material , Disable autofill or autocomplete suggestion for an input?

I'm just using simple input containers such as this

<mat-form-field >
                    <input matInput placeholder=" Old Password"  autocomplete ="off" formControlName="OldPassword" [type]="hideOldPassword ? 'password' : 'text'" >

<button mat-icon-button matSuffix (click)="hideOldPassword = !hideOldPassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hideOldPassword">
<mat-icon>{{hideOldPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-hint align="end">Enter the Old Password</mat-hint>
<mat-error *ngIf="hasError('OldPassword', 'required')">OldPassword is required</mat-error>
</mat-form-field>

I need already saved password not show in the input field. I'm using autocomplete="off" and autocomplete="false". but not disabled. Please suggest any answer

Upvotes: 0

Views: 6378

Answers (4)

Umer Farooq
Umer Farooq

Reputation: 59

You can simple use name attribute. You don't need to disable or off the autocomplete attribute in this case. It worked for me like this (Using question's input field):

<input matInput name="new-password" placeholder="Old Password" formControlName="OldPassword" [type]="hideOldPassword ? 'password' : 'text'" >

Here you can see I have used name="new-password" and it will successfully disable the autocomplete. I was facing issue with google chrome where it kept showing the auto-complete passwords.

Hope it'll help.

Cheers!

Upvotes: -1

Manojkumar Muthukumar
Manojkumar Muthukumar

Reputation: 323

For angular

<input [(ngModal)]="password" name="password" [attr.type]="password.length < 1 ? 'text': 'password'" />

Don't use input type attribute.

Input type matters. [password]

Not only chrome all the browsers will suggest Password suggestion based on input type only

When it detects with <input id="passId" type="password"/>

**It will work 100% and working perfectly for me **

Its important to remove type="password"

Upvotes: 1

Joe Alvini
Joe Alvini

Reputation: 299

Ok, so after trying all of the options above and not being able to clear my form of the pesky autofill I had decided to think outside of the box and come up with another option. So heres what I did and it worked:

import {Component, OnInit, AfterViewChecked} from '@angular/core';

...

export class RegisterComponent implements OnInit, AfterViewChecked {

    registration = new FormGroup({
        email: new FormControl(''),
        password: new FormControl('')
    });

    ngAfterViewChecked(): void {
        // email needs to be replaced to whatever field you want cleared
        this.registration.controls.email.setValue('');
    }

}

And if you want to clear the entire form you can do:

ngAfterViewChecked(): void {
    this.registration.reset();
}

If you have any questions please let me know :)

Upvotes: 0

Cpt Kitkat
Cpt Kitkat

Reputation: 1402

As of V34 Chrome does not support autocomplete="off". Instead you should use autocomplete="new-password". For mozilla I am not sure. You can refer to documentation.

<mat-form-field >
<input matInput placeholder=" Old Password"  autocomplete ="new-password"  formControlName="OldPassword" [type]="hideOldPassword ? 'password' : 'text'" >

For more details refer to this link.

Upvotes: 1

Related Questions