Formulir Reaktif Bertipe
Buat formulir dengan pengetikan ketat.
Formulir Reaktif Bertipe adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Mengapa Formulir Bertipe?
Sebelum Angular 14, nilai formulir reaktif diketik sebagai any. Formulir reaktif bertipe memberikan keamanan tipe penuh: kompiler mengetahui bentuk nilai formulir dan nama control Anda.
FormControl Bertipe
FormControl bersifat generik. Berikan tipe nilainya agar pembacaan dan penulisan diperiksa.
const name = new FormControl<string>('', {
nonNullable: true
});FormGroup Bertipe
FormGroup menyimpulkan tipe nilainya dari control yang Anda berikan.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Tipe Nilai yang Disimpulkan
value dari group di atas diketik sebagai { email: string | null; age: number | null }, dan semuanya diperiksa saat kompilasi.
const v = form.value; // typed automaticallyKemungkinan Null
Secara bawaan, control dapat diatur ulang menjadi null, sehingga tipe nilainya mencakup | null. Gunakan nonNullable untuk mengecualikan null.
new FormControl('', { nonNullable: true });
// value type: string (no null)Mengakses Control dengan Aman
form.controls.email memiliki tipe yang kuat, sehingga kesalahan ketik pada nama control dapat ditangkap oleh kompiler.
form.controls.email.setValue('a@b.com');get dibandingkan controls
Utamakan form.controls.name daripada form.get('name') untuk keamanan tipe; get mengembalikan AbstractControl | null dengan tipe yang longgar.
getRawValue
getRawValue() mengembalikan semua nilai, termasuk control yang dinonaktifkan, berbeda dari value yang menghilangkan control yang dinonaktifkan.
const all = form.getRawValue();Group Bersarang
Group bertipe dapat dikomposisikan. FormGroup bersarang menyumbangkan bentuk bertipenya sendiri ke nilai induk.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Keamanan Tipe patchValue
patchValue menerima sebagian dari nilai formulir; kunci yang tidak dikenal ditandai oleh kompiler.
form.patchValue({ email: 'x@y.com' });Memigrasikan Formulir Lama
API tanpa tipe seperti UntypedFormGroup tersedia untuk migrasi bertahap. Kode baru sebaiknya menggunakan class bertipe demi keamanan.
Pemeriksaan Singkat
Uji pemahaman Anda tentang formulir reaktif bertipe.
Ringkasan
Anda telah mempelajari bahwa formulir reaktif bertipe menjadikan FormControl/FormGroup bersifat generik dengan menyimpulkan bentuk nilai yang diperiksa, bahwa nilai bawaan mencakup | null yang dapat dihindari dengan nonNullable, serta bahwa akses melalui controls lebih aman daripada get.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Formulir Reaktif Bertipe” gratis?
Ya — teks lengkap “Formulir Reaktif Bertipe” 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 “Formulir Reaktif Bertipe”?
Buat formulir dengan pengetikan ketat. 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 1 dari 4.
Berapa lama pelajaran “Formulir Reaktif Bertipe” 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