Как избегать того, чтобы браузер авто-наполнил и авто-завершил поля формуляров?

Я пробую избегать того, чтобы Веб браузер авто-наполнил и авто-завершил поля моих формуляров в моем Угловом проекте, так как загружаются стили, которые он добавил.

В моем HTML я существую пробуя делать поля одинокого чтением и потом, когда они возьмут фокус с событием JS лишать их единственно чтения, но одинокое я функционирует, чтобы предотвращать авто-наполненный инициал, потом появляется помощь, чтобы авто-завершать.

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

Директивный орган, чтобы предотвращать автонаполненный инициал.

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();
    }
  }

}

Я читал несколько методов, чтобы решать мою проблему и не встретил ни одного, который функционировал бы правильно, практически все говорят делать то, что описано в моем директивном органе, и помещения признака автозавершите = "off"

Я делаю доказательства в Google Chrome.

Я обновляю

HTML renderizado.

<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>
22
задан 15.08.2019, 14:30
0 ответов