Typing Form dan Input Data
Mengetik value dari form dan hasil validasi sederhana sebelum data dipakai.
Tujuan belajar
- Menjelaskan input user sebagai data boundary
- Membuat type untuk form values
- Membuat validation result dengan success dan error branch
Isi lesson
5 blok- 1.User input juga perlu batas yang jelasBelum selesaiWajib
- 2.Form values dan validation resultBelum selesaiWajib
- 3.Jangan langsung percaya inputBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
User input juga perlu batas yang jelas
WajibForm adalah boundary lain yang sering membuat data berantakan. Semua input dari browser biasanya mulai sebagai string, lalu app perlu memutuskan apakah value itu valid, kosong, terlalu pendek, atau siap dikirim.
Type yang baik tidak membuat form otomatis benar. Type membantu kamu membedakan data mentah dari user, hasil validasi, dan data yang sudah aman untuk langkah berikutnya.
Bagian ini memengaruhi progres lesson.
Form values dan validation result
Wajibtype SignupFormValues = {
email: string;
password: string;
};
type ValidationResult =
| { ok: true; values: SignupFormValues }
| { ok: false; message: string };
function validateSignup(values: SignupFormValues): ValidationResult {
if (!values.email.includes("@")) {
return { ok: false, message: "Email belum valid." };
}
return { ok: true, values };
}Form values menyimpan input yang sedang dibaca. ValidationResult membedakan branch sukses dan gagal sehingga kode berikutnya harus mengecek `ok` dulu.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan langsung percaya input
Kesalahan umum adalah memberi type bagus pada form values, lalu menganggap value pasti valid. Type `string` hanya berarti bentuk datanya string. Isi string tetap perlu dicek sesuai aturan form.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususType form values dan validation result
Latihan mengetik input form dan hasil validasi sukses atau gagal.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Input user adalah boundary karena datang dari luar logic app.
- Form values mendeskripsikan data mentah yang sedang dibaca.
- Validation result membuat branch sukses dan gagal lebih eksplisit.
- Type tidak menggantikan validasi isi input.
- Berikutnya, kamu akan membentuk data agar siap dipakai oleh UI component.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: User input juga perlu batas yang jelas.