Yang dimaksud dengan show hide Password adalah menampilkan Password dalam bentuk yang sebenarnya atau menyembunyikannya dengan format simbol agar tidak terbaca oleh orang lain. Nah kali ini akan saya bahas tentang show hide Password pada artikel tentang Cara Membuat Show Hide Password Menggunakan Angularjs.

Langkah pertama untuk Cara Membuat Show Hide Password Menggunakan Angularjs, kita akan buat terlebih dahulu struktur htmlnya dengan menggunakan bootstrap agar lebih cepat dan mudah. Dan berikut ini adalah scriptnya.

Teman-teman bisa perhatikan script di atas, dimana saya membuat sebuah form input yang berisi input username dan password dan satu tombol submit. Kita fokus untuk input password ya teman-teman, untuk type inputnya saya buat dinasmis dengan ekspresion {{inputType}} dan saya memberikan ng-model=”passwordField” di dalamnya. Di samping input password terdapat span yang saya berikan ng-click=”showPassword(), dimana jika diklik maka ikonnya akan berubah sehingga saya buat dinamis dengan ekspresion {{showHideIcon}}.

Langkah selanjutnya kita akan membuat sebuah controller seperti script di bawah.

Didalam controller saya sudah membuat nilai awal dari variable inputTYpe dan showHideIcon. Kemudian ada sebuah fungsi dengan nama showPassword() yang akan dijalankan jika menekan span gambar mata di samping input password. Di dalam fungsi showPassword() terdapat kondisi yang mengecek isi dari passwordField dan dibuat lagi kondisi didalamnya untuk mengecek inputType yang kemudian nilai dariĀ  inputType akan berubah menjadi text atau password dan showHideIcon berubah menjadi eye atau eye-slash.

Jika teman-teman lihat di browser maka tampilannya akan seperti pada gambar di bawah ini.

Cara Membuat Show Hide Password Menggunakan Angularjs

Cara Membuat Show Hide Password Menggunakan Angularjs

Demikian artikel tentang Cara Membuat Show Hide Password Menggunakan Angularjs. Semoga bermanfaat.