В Angular вы можете отключить автозаполнение полей ввода, используя атрибут autocomplete
со значением «off». Для этого можно использовать несколько методов:
-
Формы на основе шаблонов. Если вы используете формы на основе шаблонов, вы можете установить атрибут
autocomplete
непосредственно во входном элементе. Например:<input type="text" name="username" autocomplete="off">
-
Реактивные формы. Если вы используете реактивные формы, вы можете отключить автозаполнение с помощью метода
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' }) }); }
-
Директивы. Другой подход — создать специальную директиву, которая устанавливает для атрибута
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>
-
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. Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта.