Angular directive to disable browser autofill on input forms (Tested Angular 18)

disable-autofill-input.directive.ts

import {
      Directive,
      Renderer2,
      ElementRef,
      HostListener,
      AfterViewInit,
  } from '@angular/core';

  @Directive({
      selector: '[DisableAutofillInput]',
  })
  export class DisableAutofillInputDirective implements AfterViewInit {
      constructor(
          private el: ElementRef,
          private renderer: Renderer2,
      ) {}

      ngAfterViewInit(): void {
          // Set readonly secara default saat direktif diinisialisasi
          this.renderer.setAttribute(this.el.nativeElement, 'readonly', 'true');
      }

      // Event listener saat elemen menerima focus
      @HostListener('focus')
      onFocus(): void {
          this.renderer.removeAttribute(this.el.nativeElement, 'readonly');
      }

      // Event listener saat elemen kehilangan focus
      @HostListener('blur')
      onBlur(): void {
          this.renderer.setAttribute(this.el.nativeElement, 'readonly', 'true');
      }
  }

How to Using?

1. Load the Directive first

Example like this:

import { DisableAutofillInputDirective } from './disable-autofill-input.directive';

  @NgModule({
      declarations: [DisableAutofillInputDirective],
      exports: [DisableAutofillInputDirective]
  })
  export class SharedModule { }

2. Add the Directive

Add this DisableAutofillInput on the input form like this:

<input
      formControlName="email"
      DisableAutofillInput
  />

Follow the Article https://www.kang-cahya.com/2024/11/tips-angular-cara-mengatasi-autofill.html