Angular02

Pada modul ini kita akan menambahkan fungsional untuk add ingredients. Pertama kita perlu menambahkan button untuk menambahkan field ingredient baru. Buka file recipe-edit.component.html, tambahkan code untuk button Add Ingredients (lihat bagian commentar). Kemudian buka file recipe-edit.component.ts, tambahkan method untuk handling button click diatas. Jika jalankan aplikasi, sesuai ekspektasi, control form baru berhasil ditambahkan ketika button … Read more

Pada modul ini kita akan tambahkan ingredient pada form. Buka file recipe-edit.component.ts, modifikasi dengan menambahkan beberapa code berikut: Import library FormArray. inisialisasi variable untuk menyimpan data ingredients. retrive data ingredients jika Ada, lalu tambahkan pada object form. tambahkan method getter untuk mendapatkakan ingredients control. Selanjutnya kita sinkronasikan dengan file template, buka recipe-edit.component.html, modifikasi yang dilakukan … Read more

Untuk kelengkapan tutorial, pada modul ini akan membahas penggunaan reactive form untuk edit recipe. Untuk pembahasan dasar mengenai Reactive Form bisa lihat di modul : https://skillplus.web.id/angular-reactive-forms-1/ Setup Reactive Form Pertama, kita buka file app.module.ts, tambahkan library reactive forms module. Membuat Form Template Buka file edit-recipe.component.html, kita buat template form seperti berikut: Kemudian buka file recipe-edit.component.ts, … Read more

Pada modul ini kita akan melakukan beberapa hal, yaitu reset form dan menambahkan fitur pada button clear dan del. Reset Form Untuk melakukan form reset, dapat dilakukan sesudah proses add atau update. Buka file shopping-edit.component.ts, lalu ubah code onAddItem(). Menambahkan Fungsi pada button Clear Buka file shopping-edit.component.html, pertama kita akan modifikasi button clear. Tambahkan click … Read more