Отключить автозаполнение в полях ввода Angular

В Angular вы можете отключить автозаполнение полей ввода, используя атрибут autocompleteсо значением «off». Для этого можно использовать несколько методов:

  1. Формы на основе шаблонов. Если вы используете формы на основе шаблонов, вы можете установить атрибут autocompleteнепосредственно во входном элементе. Например:

    <input type="text" name="username" autocomplete="off">
  2. Реактивные формы. Если вы используете реактивные формы, вы можете отключить автозаполнение с помощью метода autocompleteкласса FormControl. Вот пример:

    import { Component } from '@angular/core';
    import { FormControl } from '@angular/forms';
    @Component({
     selector: 'app-my-form',
     template: `
       <form [formGroup]="myForm">
         <input type="text" formControlName="username">
       </form>
     `
    })
    export class MyFormComponent {
     myForm = new FormGroup({
       username: new FormControl('', { updateOn: 'blur', autocomplete: 'off' })
     });
    }
  3. Директивы. Другой подход — создать специальную директиву, которая устанавливает для атрибута autocompleteзначение «выключено» во входном элементе. Вот пример того, как можно создать и использовать такую ​​директиву:

    import { Directive, ElementRef } from '@angular/core';
    @Directive({
     selector: '[disableAutocomplete]'
    })
    export class DisableAutocompleteDirective {
     constructor(private elementRef: ElementRef) {
       this.elementRef.nativeElement.autocomplete = 'off';
     }
    }
    <input type="text" name="username" disableAutocomplete>
  4. Renderer2: если вы предпочитаете использовать API Renderer2, вы можете отключить автозаполнение, установив атрибут autocompleteдля элемента, использующего средство визуализации. Вот пример:

    import { Component, Renderer2, ElementRef, OnInit } from '@angular/core';
    @Component({
     selector: 'app-my-component',
     template: '<input type="text" #username>'
    })
    export class MyComponent implements OnInit {
     constructor(private renderer: Renderer2, private el: ElementRef) {}
     ngOnInit(): void {
       this.renderer.setAttribute(this.el.nativeElement.querySelector('input'), 'autocomplete', 'off');
     }
    }

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