ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล
สร้างฟอร์มด้วยการกำหนดชนิดข้อมูลอย่างเข้มงวด
ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงใช้ฟอร์มที่มีชนิดข้อมูล
ก่อน Angular 14 ค่าของฟอร์มแบบรีแอกทีฟจะมีชนิดเป็น any ฟอร์มแบบรีแอกทีฟที่มีชนิดข้อมูล ช่วยให้ตรวจสอบชนิดข้อมูลได้อย่างสมบูรณ์ คอมไพเลอร์จะทราบโครงสร้างของค่าฟอร์มและชื่อคอนโทรล
FormControl ที่มีชนิดข้อมูล
FormControl เป็นชนิดทั่วไป ให้ระบุชนิดของค่าเพื่อให้ระบบตรวจสอบทั้งการอ่านและการเขียน
const name = new FormControl<string>('', {
nonNullable: true
});FormGroup ที่มีชนิดข้อมูล
FormGroup อนุมานชนิดของค่าจากคอนโทรลที่ส่งให้
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});ชนิดค่าที่อนุมานได้
value ของกลุ่มด้านบนจะมีชนิดเป็น { email: string | null; age: number | null } และได้รับการตรวจสอบทั้งหมดขณะคอมไพล์
const v = form.value; // typed automaticallyความเป็นค่าว่าง
โดยค่าเริ่มต้น คอนโทรลสามารถรีเซ็ตเป็น null ได้ ดังนั้นชนิดค่าจึงมี | null รวมอยู่ด้วย ใช้ nonNullable เพื่อไม่ให้รวมค่า null
new FormControl('', { nonNullable: true });
// value type: string (no null)การเข้าถึงคอนโทรลอย่างปลอดภัย
form.controls.email มีการระบุชนิดข้อมูลอย่างเข้มงวด ดังนั้นคอมไพเลอร์จะตรวจพบการพิมพ์ชื่อคอนโทรลผิด
form.controls.email.setValue('a@b.com');get เทียบกับ controls
ควรใช้ form.controls.name แทน form.get('name') เพื่อความปลอดภัยด้านชนิดข้อมูล เนื่องจาก get ส่งคืนค่า AbstractControl | null ที่มีชนิดข้อมูลไม่เฉพาะเจาะจง
getRawValue
getRawValue() ส่งคืนค่าทั้งหมด รวมถึงคอนโทรลที่ ปิดใช้งาน ต่างจาก value ที่ไม่รวมคอนโทรลที่ปิดใช้งาน
const all = form.getRawValue();กลุ่มที่ซ้อนกัน
กลุ่มที่มีชนิดข้อมูลสามารถประกอบกันได้ FormGroup ที่ซ้อนอยู่จะเพิ่มโครงสร้างที่มีชนิดข้อมูลของตนเองเข้าไปในค่าของกลุ่มแม่
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});ความปลอดภัยด้านชนิดข้อมูลของ patchValue
patchValue รับค่าบางส่วนของค่าฟอร์ม และคอมไพเลอร์จะแจ้งเตือนคีย์ที่ไม่รู้จัก
form.patchValue({ email: 'x@y.com' });การย้ายจากฟอร์มแบบเดิม
มีเอพีไอที่ไม่มีชนิดข้อมูล เช่น UntypedFormGroup เพื่อรองรับการย้ายระบบทีละน้อย โค้ดใหม่ควรใช้คลาสที่มีชนิดข้อมูลเพื่อความปลอดภัย
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับฟอร์มแบบรีแอกทีฟที่มีชนิดข้อมูล
สรุปทบทวน
คุณได้เรียนรู้ว่าฟอร์มแบบรีแอกทีฟที่มีชนิดข้อมูลทำให้ FormControl/FormGroup เป็นชนิดทั่วไปและอนุมานโครงสร้างค่าที่ผ่านการตรวจสอบได้ ค่าเริ่มต้นจะรวม | null ไว้ด้วย ซึ่งหลีกเลี่ยงได้ด้วย nonNullable และการเข้าถึงผ่าน controls ปลอดภัยกว่าการใช้ get
คำถามที่พบบ่อย
บทเรียน “ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล”
สร้างฟอร์มด้วยการกำหนดชนิดข้อมูลอย่างเข้มงวด คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล
- FormArray และฟิลด์แบบไดนามิก
- ตัวตรวจสอบแบบอะซิงโครนัส
- รูปแบบการใช้ FormBuilder