Pola FormBuilder
Bangun formulir kompleks dengan FormBuilder.
Pola FormBuilder adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Lebih Sedikit Kode Berulang
FormBuilder adalah layanan yang membuat group, control, dan array formulir dengan sintaks ringkas, sehingga Anda tidak perlu menulis berulang kali pemanggilan new FormControl(...).
Menyuntikkan FormBuilder
Suntikkan layanan tersebut ke dalam komponen Anda.
private fb = inject(FormBuilder);Membuat Group
fb.group menerima objek yang memetakan nama ke nilai awal, yang dapat disertai validator secara opsional.
form = this.fb.group({
email: ['', Validators.required],
age: [0]
});Tuple Nilai + Validator
Setiap entri dapat berupa tuple: [initialValue, syncValidators, asyncValidators].
password: ['', [Validators.required, Validators.minLength(8)]]Builder Tanpa Null
fb.nonNullable menghasilkan control yang tidak pernah bernilai null, sehingga pengaturan ulang mengembalikan nilai awal, bukan null.
form = this.fb.nonNullable.group({
name: '',
active: true
});Mengapa nonNullable Penting
Dengan nonNullable, tipe nilai tidak lagi mencakup | null dan reset() mengembalikan nilai bawaan asli, yang biasanya Anda inginkan.
Membuat Array
fb.array membuat FormArray. Gabungkan dengan fb.group untuk membuat array berisi group.
form = this.fb.group({
items: this.fb.array([])
});Pembantu untuk Item Array
Metode pabrik menjaga pembuatan item array tetap konsisten.
newItem() {
return this.fb.group({
label: [''],
qty: [1]
});
}Menambahkan Item
Masukkan group yang telah dibuat ke dalam array.
get items() {
return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }Konfigurasi Control Eksplisit
Untuk menggunakan nonNullable pada satu control, berikan objek opsi, bukan tuple.
token: this.fb.control('', { nonNullable: true })Kapan Menggunakan FormBuilder
Gunakan FormBuilder untuk keterbacaan pada formulir yang lebih besar. API eksplisit new FormControl setara dan terkadang lebih jelas untuk control sekali pakai.
Pemeriksaan Singkat
Uji pemahaman Anda tentang pola FormBuilder.
Ringkasan
Anda telah mempelajari bahwa FormBuilder (fb.group, fb.control, fb.array) mengurangi kode berulang, tuple memuat nilai dan validator, serta fb.nonNullable menghasilkan control tanpa null yang pengaturan ulangnya kembali ke nilai bawaan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola FormBuilder” gratis?
Ya — teks lengkap “Pola FormBuilder” 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 “Pola FormBuilder”?
Bangun formulir kompleks dengan FormBuilder. 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 4 dari 4.
Berapa lama pelajaran “Pola FormBuilder” 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.