I am using angular material for all my controls. We have a requirement to disable auto-complete so that any previously typed value will not show up. I have my code as below. I tried autocomplete "off" "disabled" and other suggestions that I found online. But nothing seems to work.
<mat-form-field
[ngClass]="{ 'invalid-uinque-id': (form.errors.locatorId || form.errors.locatorIdInvalidBadge) }"
id="sta_BadgeFormField"
>
<input
formControlName="locatorId"
(blur)="onBlurLocatorVendorMethod(selectedVendor.id)"
matInput
i18n-placeholder="Locator Badge ID|Placeholder for locator badge id label in add staff dialog@@addstaffLocatorBadgeId"
placeholder="Locator Badge ID"
name="locatorId"
maxlength="20"
[errorStateMatcher]="esMatcher"
autocomplete="disabled"
/>
</mat-form-field>
In the past, many developers would add
autocomplete="off"
to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here.
BUT (Directive)
If you still want to keep focusing on disabling part, here is the closest solution for you to achieve this with directive.