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?

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.

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">

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" />

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" />

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.

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

just use [matAutocompleteDisabled] property with a valid condition.

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" />