Mengenal FormsModule dan ngModel

Data binding dalam form controls

Dalam tutorial ini mari kita skip teori belakangan dan langsung pada praktek.

Untuk membuat app sederhana yang digunakan pada tutorial ini silahkan mengikuti tutorial ini terlebih dahulu.

Buka dan edit file app.component.html hingga menjadi seperti ini:

Isi file yang telah diubah

Buka dan edit property title menjadi name pada file app.component.ts seperti ini:

Ubah property “title” menjadi “name”

Simpan semua perubahan kedua files tersebut, dan seharusnya seperti inilah hasil perubahan yang terjadi:

Hasil pengubahan pada component’s html dan property

Goal utama kita adalah: Secara realtime mengubah text nama Anda saat mengisi pada textfield.

Buka dan edit kembali file app.component.html menjadi seperti ini:

Menambahkan [(ngModel)] sebagai form attribute

Simpan perubahan, dan perhatikan pada browser sekarang hanya ada blank page.

Blank page setelah pengubahan isi file

Tidak hanya blank page pada browser, tapi juga akan muncul error pada console Chrome DevTool seperti ini:

Pesan error karena ngModel tidak dikenali

Hal ini terjadi karena Angular belum mengenali [(ngModel)] keyword yang menjadi form field attribute di atas.

Solusinya tentu memperkenalkan (dengan cara meng-import) FormsModule pada file app.module.ts seperti ini:

Penambahan (import) FormsModule

Simpan perubahan, maka tampilan di browser akan muncul seperti semula. Pesan error yang ada pada console Chrome DevTool juga hilang.

Tidak hanya itu, namun sekarang goal kita pada tutorial ini pun sudah tercapai, yaitu: Secara realtime mengubah text nama Anda saat mengisi pada textfield.

Data binding pada form field

Inilah kegunaan dari FormsModule dan ngModel. Dalam Angular fitur ini disebut data binding (dalam suatu form field).

Atribusi Anda berupa clapping, sharing, ngasih komentar, dan following blog ini dapat menimbulkan efek samping berupa semangat menulis yang menggebu bagi saya 