Angular

Melanjutkan dari modul sebelumnya, kita akan mulai membuat form. Untuk membuat form, digunakan class FormGroup yang akan berisi javascript object, dimana isinya adalah FormControl. Secara sederhana, struktur untuk membuat form adalah sebagai berikut: Buka file app.component.ts, form akan kita buat dalam method onInit. Jadi perlu ditambahkan implements onInit, dan membuat method ngOnInit(). Sampai disini, code … Read more

Pendekatan Reactive Forms adalah membuat form melalui code typescript. Anda bisa download file awal project disini : https://drive.google.com/file/d/151h6ANBdQSzjiGCPzOdyrAqt4NkpbsoB/view?usp=sharing Untuk menggunakan reactive forms, perlu import library pada app.module.ts Buka file app.module.ts, hapus FormsModule (tidak digunakan), kemudian import ReactiveFormsModule. Untuk membuat form melalui program, kita perlu container dengan menggunakan FormGroup. Buka file app.component.ts, kemudian tambahkan property untuk … Read more

Masih melanjutkan project sebelumnya, kali ini kita akan membahas melakukan manipulasi form. Pada form terdapat button suggest user name, skenarionya adalah, jika user menekan button tersebut, kita akan mengisi value tertentu pada form. Anda bisa menggunakan pendekatan two-way binding, namun pada tutorial ini akan dibahas pendekatan lain, yaitu menggunakan @ViewChild. Pertama kita buka file app.component.html, … Read more

Ada yang kurang dengan project awal pengenalan form, yaitu menggunakan radio button. Mari kita bahas penggunaan radio button dengan membuka file app.component.ts, lalu tambahkan property jenisKelamin; Kemudian buka file app.component.html, tambahkan radio button dengan cara looping menggunakan ngFor. Jika dijalankan, radio button Jenis Kelamin sudah tampil sesuai ekspektasi. Berikut isi lengkap file app.component.html file app.component.ts