CODEWITHSUNDEEP
angularjsangular-material
Bryce Rogers
Bryce Rogers

Reputation: 698

Angular Materials: Can you disable the autocomplete suggestions for an input?

I'm just using simple input containers such as this

<md-input-container class="md-block" flex-gt-sm >
    <label>Name</label>
    <input md-maxlength="30" name="name" ng-model="name" />
</md-input-container>

The input field is suggesting previously entered values which is obscuring some important interface elements and also really not necessary in my case. Is there any way to disable the suggestions?

Upvotes: 64

Views: 114677

Answers (9)

Thendokhae Makahane
Thendokhae Makahane

Reputation: 734

For modern browsers the following should work:

<input name="test" autocomplete="off" />

Upvotes: 0

Ali Jebali
Ali Jebali

Reputation: 134

for modern browsers and on latest update right now, you can add these two attributes autocomplete="false" and role="presentation" to your input.

Upvotes: 0

Sahan Pasindu Nirmal
Sahan Pasindu Nirmal

Reputation: 441

Just use input type="search" you will be fine. Tested on Google Chrome Version 92.0.4515.107 (Official Build) (arm64)

Eg: <input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" />

Upvotes: 0

Mohamed TEBANI
Mohamed TEBANI

Reputation: 316

Add autocomplete="off" to the input but for modern browser use autocomplete="nope"

Legacy browser

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

Modern browser

<input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" />

Upvotes: 20

Rashidul Alam Oli
Rashidul Alam Oli

Reputation: 32

<input type="text" id="example" placeholder="" matInput  [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/>

just use [matAutocompleteDisabled] property with a valid condition.

Upvotes: 1

hovado
hovado

Reputation: 4958

Browsers often ignore autocomplete="off" for inputs that do not have a name attribute or have its value set to be common for autofill feature (name, email, street, country ...).

In my case, it is enough to set the input an unusual name.

<input type="text" name="someUnusualName" autocomplete="off">

Upvotes: 24

GraveyTrain016
GraveyTrain016

Reputation: 31

New Browsers seems to look at the id field or name field to determine what you are looking for with autofill. I started spelling things backwards when I wanted to turn autofill off.

The problem tag - autofill popup

<input id='cp_state_i' required />

The fix - not autofill popup

<input id='cp_etats_i' required />

My issue was that I was using an autocomplete options list for the states. The popup was a problem. This was my fix, might help you.

Another thing that seems to work on some text fields is this

<input autocomplete='new-password'/>

I remove type='text and it would stop popping up things. but for whatever reason it didnt work on everything just some things.

I am not sure why Browsers wont honor autocomplete='off' any longer. It makes for some headaches when dealing with CRUD and other reasonable operations other than simply login forms.

Upvotes: 3

curiousBoy
curiousBoy

Reputation: 6834

Just in case someone had same experience with me (as the current answer did not work on my chrome), I used like below and it worked:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" />

Upvotes: 14

Bharat Gupta
Bharat Gupta

Reputation: 2706

Add autocomplete="off" to the input element, just like this:

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

See this for your reference.

Upvotes: 140

Related Questions