En el pasado, muchos desarrolladores agregaban autocomplete="off" a sus campos de formulario para evitar que el navegador realizara algún tipo de función de autocompletar. Si bien Chrome aún respetará esta etiqueta para los datos de autocompletar, no la respetará para los datos de autocompletar.

Una solución es poner un valor desconocido en la función de autocompletar,

<input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" /> .

Al probar esto funcionó para mí la mayor parte del tiempo, pero por alguna razón dejó de funcionar después.

Mi consejo es no luchar contra él y usar su potencial usando correctamente el atributo de autocompletar como se explica aquí .

 <fieldset> <legend>Ship the blue gift to...</legend> <p> <label> Address: <textarea name=ba autocomplete="section-blue shipping street-address"></textarea> </label> <p> <label> City: <input name=bc autocomplete="section-blue shipping address-level2"> </label> <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label> </fieldset>

PERO (Directiva)

Si aún desea seguir centrándose en deshabilitar la parte, esta es la solución más cercana para que lo logre con la directiva.

 import { Directive, HostBinding, Attribute } from '@angular/core'; @Directive({ selector: '[matInput]', }) export class AutocompleteOffDirective { @HostBinding('attr.autocomplete') auto; constructor(@Attribute('autocomplete') autocomplete: string) { this.auto = autocomplete || 'off' } }

Puede usar autocomplete="off" para el navegador clásico, mientras que para el navegador moderno puede usar autocomplete="nope" como se muestra a continuación:

Navegador clásico:

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

Navegador moderno:

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

El comportamiento de autocompletar de los navegadores está vinculado al atributo de name de su control. Este problema en realidad no está relacionado con Angular, es más un problema del navegador, Google Chrome es particularmente difícil de tratar en este tema.

Solución 1:

La siguiente solución puede funcionar, sin embargo, al menos una vez que Google Chrome dejó de admitirlo , el valor que debería funcionar es autocomplete="off" , si no, pruebe la segunda solución:

 <!-- removed everything but the changes for the sake of simplicity --> <mat-form-field ...> <input ... autocomplete="off" /> </mat-form-field>

Solución 2:

Este es el que terminé usando para mi proyecto, ya que funcionó en todos los escenarios, puede engañar al navegador para que piense que no hay nada que autocompletar eliminando cualquier rastro del atributo de name original:

 // typescript untraceableFieldName: string; fixChromeAutocomplete(): void { this.untraceableFieldName = 'locatorId' + new Date().getTime().toString(); }

 <!-- removed everything but the changes for the sake of simplicity --> <mat-form-field ...> <input ... [name]="untraceableFieldName" (keydown)="fixChromeAutocomplete()" (change)="fixChromeAutocomplete()" /> </mat-form-field>

La última solución tiene, por supuesto, el problema de que ahora ya no podrá usar el atributo de name para ninguna de sus lógicas, esta solución no es elegante , pero seguro que funciona.

Puede leer mucho más sobre el tema en esta otra pregunta .

Especialmente para Google Chrome:

Septiembre/2021 : Últimamente, su informe de errores ha sido más activo para errores relacionados , ya que parece que se trata de un problema de regresión. Es en realidad uno de los errores más calificados para resolver en el rastreador de errores de Chrome . Puede ver que los problemas relacionados con Chrome ignorando el autocomplete="off" todavía están abiertos aquí . Entonces, actualmente la segunda solución parece ser la única forma de resolverlo.

Puede probar esto para deshabilitar la función de autocompletar para todos los controles. Esto funciona para mi.

 <form autocomplete="off">