Tips Angular: Cara Mengatasi Autofill Browser pada Form Input

Autofill pada browser sering kali menjadi masalah, terutama jika kita ingin memastikan inputan pengguna tidak terisi otomatis oleh data sebelumnya. Pada kasus tertentu, autocomplete="off" pada elemen <input> seharusnya mematikan autofill, tetapi sayangnya, sering kali ini tidak berfungsi.

Pada artikel kali ini, kita akan membahas cara mengatasi autofill pada form input di Angular dan untuk UI-nya saya menggunakan ng-zorro dari Antdesign, jika pada kode yang saya buat terdapat kata nz-input atau yang lainnya bisa abaikan saja, Anda bisa sesuaikan berdasarkan UI yang Anda pakai.

Untuk mengatasi masalah ini Ada dua cara yang bisa Anda coba, yaitu: dengan menambahkan fungsi pada event focus/blur, atau menggunakan directive custom. Mari kita mulai!

Cara 1: Menambahkan Fungsi Focus/Blur

Langkah pertama adalah membuat dua fungsi yang akan mengubah atribut readonly pada saat event focus dan blur dipicu. Ide dasarnya adalah membuat input bersifat readonly secara default, kemudian menghapus atribut tersebut ketika input difokuskan, sehingga autofill browser tidak akan aktif.

Langkah-langkah:

1. Buat fungsi onFocus dan onBlur pada file .ts Anda untuk menangani event focus dan blur:

					
  onFocus(event: FocusEvent): void {
      (event.target as HTMLInputElement).readOnly = false;
  }

  onBlur(event: FocusEvent): void {
      (event.target as HTMLInputElement).readOnly = true;
  }
  
				

Tambahkan atribut berikut:

					
      [readonly]="true"
      (focus)="onFocus($event)"
      (blur)="onBlur($event)"
  
				

Pada elemen input di kode HTML Anda, seperti ini:

					
  <input
      formControlName="phone"
      [readonly]="true"
      (focus)="onFocus($event)"
      (blur)="onBlur($event)"
      nz-input
  />
  
				

Dengan cara ini, saat input dalam keadaan readonly, browser tidak akan melakukan autofill. Atribut readonly dihapus sementara saat input difokuskan dan dikembalikan saat elemen kehilangan fokus.

Cara 2: Menggunakan Directive Custom untuk Menonaktifkan Autofill

Cara kedua adalah membuat directive custom di Angular. Dengan cara ini, Anda bisa menggunakan directive tersebut pada elemen input manapun yang ingin Anda matikan autofill-nya. Directive ini akan mengatur atribut readonly secara otomatis saat elemen mendapatkan atau kehilangan fokus.

Langkah-langkah:

1. Buat directive baru dengan kode berikut:

DisableAutofillInputDirective akan mengatur atribut readonly secara default menjadi true. Saat elemen mendapatkan fokus, atribut readonly dihapus, dan saat elemen kehilangan fokus, atribut tersebut dikembalikan.

2. Load directive ini di modul Angular Anda agar bisa digunakan dalam aplikasi:

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

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

3. Terakhir, tambahkan directive DisableAutofillInput pada elemen input di kode HTML Anda seperti ini:

					
  <input
      formControlName="phone"
      nz-input
      DisableAutofillInput
  />
  
				

Dengan begitu, semua elemen input yang menggunakan DisableAutofillInput akan memiliki mekanisme yang sama untuk mematikan autofill browser.

Kesimpulan

Mematikan autofill pada elemen input di Angular dapat menjadi solusi efektif untuk menghindari masalah isian otomatis yang seringkali mengganggu, terutama pada formulir-formulir yang memerlukan input spesifik dari pengguna. Kedua cara di atas memberikan opsi yang dapat disesuaikan dengan kebutuhan dan alur kerja dalam aplikasi Anda.

Mungkin cukup sekian untuk pembahasan kali ini, semoga bermanfaat, terimakasih.