I am trying to prevent the web browser from auto-filling and auto-completing the fields of my forms in my Angular project, since it loads the styles I have added.
In my HTML I have tried to make the fields read-only and then when they get the focus with a JS event remove the read-only, but this only works for me to avoid the initial auto-fill , then the auto-complete help appears.
<section>
<form novalidate [formGroup]="formGroup" (ngSubmit)="onClickSignIn()">
<img src="assets/images/logo.png"/>
<md-input-container>
<input mdInput type="email" placeholder="Email" [formControl]="formGroup.controls['email']" #email appNoAutoComplete readonly>
</md-input-container>
<md-input-container>
<input mdInput type="password" placeholder="Contraseña" [formControl]="formGroup.controls['password']" #password>
</md-input-container>
<button md-button type="submit" [disabled]="formGroup.invalid">ENTRAR</button>
<div id="forgotten-password"><a (click)="onClickForgottenPassword()">¿Has olvidado la contraseña?</a></div>
</form>
</section>
Directive to prevent initial autofill .
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appNoAutoComplete]',
})
export class NoAutoCompleteDirective {
constructor(private el: ElementRef) {}
@HostListener('focus', ['$event'])
public onFocus() {
if (this.el.nativeElement.hasAttribute('readonly')) {
this.el.nativeElement.removeAttribute('readonly');
this.el.nativeElement.blur();
this.el.nativeElement.focus();
}
}
}
I have been reading several methods to solve my problem and I have not found any that work correctly, practically all of them say to do what is described in my directive and to put the autocomplete="off" attribute
I do the tests in Google Chrome.
update
Rendered HTML.
<app-signin _nghost-c0="" class=""><section _ngcontent-c0="">
<form _ngcontent-c0="" novalidate="" ng-reflect-form="[object Object]" class="ng-touched ng-dirty ng-valid">
<img _ngcontent-c0="" src="assets/images/logo.png">
<md-input-container _ngcontent-c0="" class="mat-input-container ng-tns-c1-0 ng-touched ng-dirty ng-valid"><div class="mat-input-wrapper"><div class="mat-input-flex"><!--bindings={
"ng-reflect-ng-if": "0"
}--><div class="mat-input-infix">
<input _ngcontent-c0="" appnoautocomplete="" class="mat-input-element ng-touched ng-dirty ng-valid" mdinput="" placeholder="Email" type="email" ng-reflect-form="[object Object]" ng-reflect-placeholder="Email" ng-reflect-type="email" id="md-input-1" aria-invalid="false">
<span class="mat-input-placeholder-wrapper"><!--bindings={
"ng-reflect-ng-if": "true"
}--><label class="mat-input-placeholder ng-tns-c1-0 mat-float" for="md-input-1">Email <!--bindings={
"ng-reflect-ng-if": "false"
}--></label></span></div><!--bindings={
"ng-reflect-ng-if": "0"
}--></div><div class="mat-input-underline"><span class="mat-input-ripple"></span></div><div class="mat-input-subscript-wrapper" ng-reflect-ng-switch="hint"><!--bindings={
"ng-reflect-ng-switch-case": "error"
}--><!--bindings={
"ng-reflect-ng-switch-case": "hint"
}--><div class="mat-input-hint-wrapper ng-tns-c1-0 ng-trigger ng-trigger-transitionMessages" style="opacity: 1; transform: translateY(0%);"><!--bindings={
"ng-reflect-ng-if": ""
}--><div class="mat-input-hint-spacer"></div></div></div></div></md-input-container>
<md-input-container _ngcontent-c0="" class="mat-input-container ng-tns-c1-1 ng-dirty ng-valid ng-touched"><div class="mat-input-wrapper"><div class="mat-input-flex"><!--bindings={
"ng-reflect-ng-if": "0"
}--><div class="mat-input-infix">
<input _ngcontent-c0="" class="mat-input-element ng-dirty ng-valid ng-touched" mdinput="" placeholder="Contraseña" type="password" ng-reflect-form="[object Object]" ng-reflect-placeholder="Contraseña" ng-reflect-type="password" id="md-input-3" aria-invalid="false">
<span class="mat-input-placeholder-wrapper"><!--bindings={
"ng-reflect-ng-if": "true"
}--><label class="mat-input-placeholder ng-tns-c1-1 mat-float" for="md-input-3">Contraseña <!--bindings={
"ng-reflect-ng-if": "false"
}--></label></span></div><!--bindings={
"ng-reflect-ng-if": "0"
}--></div><div class="mat-input-underline"><span class="mat-input-ripple"></span></div><div class="mat-input-subscript-wrapper" ng-reflect-ng-switch="hint"><!--bindings={
"ng-reflect-ng-switch-case": "error"
}--><!--bindings={
"ng-reflect-ng-switch-case": "hint"
}--><div class="mat-input-hint-wrapper ng-tns-c1-1 ng-trigger ng-trigger-transitionMessages" style="opacity: 1; transform: translateY(0%);"><!--bindings={
"ng-reflect-ng-if": ""
}--><div class="mat-input-hint-spacer"></div></div></div></div></md-input-container>
<button _ngcontent-c0="" class="mat-button" md-button="" type="submit" ng-reflect-disabled="false"><span class="mat-button-wrapper">ENTRAR</span><div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]" ng-reflect-centered="false" ng-reflect-disabled="false"></div><div class="mat-button-focus-overlay"></div></button>
<div _ngcontent-c0="" id="forgotten-password"><a _ngcontent-c0="">¿Has olvidado la contraseña?</a></div>
</form>
</section></app-signin>
