FormArray dan Kolom Dinamis
Tambahkan dan hapus kontrol formulir saat runtime.
FormArray dan Kolom Dinamis adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.
Kumpulan Bidang Dinamis
Beberapa formulir memiliki jumlah bidang yang berubah-ubah, seperti daftar nomor telepon atau item baris. FormArray mengelola kumpulan control yang berurutan dan dapat diperluas.
Membuat FormArray
FormArray menampung array control atau group.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Di Dalam FormGroup
Sisipkan array ke dalam group induk agar menjadi bagian dari seluruh nilai formulir.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Menambahkan Control
Panggil push untuk menambahkan control baru secara dinamis.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Menghapus Control
Gunakan removeAt(index) untuk menghapus control tertentu.
removePhone(i: number) {
this.phones.removeAt(i);
}Merender dengan @for
Lakukan iterasi pada control array di templat, lalu ikat masing-masing berdasarkan indeks menggunakan formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>Direktif formArrayName
formArrayName menghubungkan blok templat ke array, sedangkan formControlName di dalamnya menggunakan indeks numerik.
Array Berisi Group
Untuk item yang lebih kaya, simpan FormGroup di dalam array, misalnya setiap kontak memiliki nama dan nomor.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Merender Item Group
Gunakan formGroupName dengan indeks untuk setiap group di dalam array.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Membaca Nilai
Nilai array berupa array biasa yang berurutan dan mencerminkan control saat ini.
const list = this.phones.value; // string[]Mengosongkan Array
clear() menghapus semua control sekaligus, sehingga praktis saat mengatur ulang bagian dinamis.
this.phones.clear();Pemeriksaan Singkat
Uji pemahaman Anda tentang FormArray.
Ringkasan
Anda telah mempelajari bahwa FormArray mengelola kumpulan control atau group yang dinamis dan berurutan menggunakan push, removeAt, dan clear, lalu merendernya dengan formArrayName serta formControlName/formGroupName yang berindeks.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “FormArray dan Kolom Dinamis” gratis?
Ya — teks lengkap “FormArray dan Kolom Dinamis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “FormArray dan Kolom Dinamis”?
Tambahkan dan hapus kontrol formulir saat runtime. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Angular Academy?
Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “FormArray dan Kolom Dinamis” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Formulir Reaktif Bertipe
- FormArray dan Kolom Dinamis
- Validator Asinkron
- Pola FormBuilder