รูปแบบการใช้ FormBuilder
สร้างฟอร์มซับซ้อนด้วย FormBuilder
รูปแบบการใช้ FormBuilder เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ลดโค้ดซ้ำซ้อน
FormBuilder เป็นบริการที่สร้างกลุ่มฟอร์ม คอนโทรล และอาร์เรย์ด้วยไวยากรณ์ที่กระชับ ช่วยหลีกเลี่ยงการเรียก new FormControl(...) ซ้ำ ๆ
การฉีด FormBuilder
ฉีดบริการนี้เข้าไปในคอมโพเนนต์
private fb = inject(FormBuilder);การสร้างกลุ่ม
fb.group รับออบเจ็กต์ที่จับคู่ชื่อกับค่าเริ่มต้น และอาจระบุตัวตรวจสอบร่วมด้วย
form = this.fb.group({
email: ['', Validators.required],
age: [0]
});ทูเพิลค่าและตัวตรวจสอบ
แต่ละรายการสามารถเป็นทูเพิลได้ดังนี้ [initialValue, syncValidators, asyncValidators]
password: ['', [Validators.required, Validators.minLength(8)]]ตัวสร้างแบบไม่รับค่าว่าง
fb.nonNullable สร้างคอนโทรลที่ไม่มีวันเป็น null ดังนั้นการรีเซ็ตจะคืนค่าเริ่มต้น ไม่ใช่ null
form = this.fb.nonNullable.group({
name: '',
active: true
});เหตุใด nonNullable จึงสำคัญ
เมื่อใช้ nonNullable ชนิดค่าจะตัด | null ออก และ reset() จะคืนค่าเริ่มต้นเดิม ซึ่งโดยทั่วไปเป็นพฤติกรรมที่ต้องการ
การสร้างอาร์เรย์
fb.array สร้าง FormArray และสามารถใช้ร่วมกับ fb.group เพื่อสร้างอาร์เรย์ของกลุ่ม
form = this.fb.group({
items: this.fb.array([])
});ตัวช่วยสำหรับรายการในอาร์เรย์
เมธอดโรงงานช่วยให้การสร้างรายการในอาร์เรย์มีรูปแบบสอดคล้องกัน
newItem() {
return this.fb.group({
label: [''],
qty: [1]
});
}การเพิ่มรายการ
เพิ่มกลุ่มที่สร้างแล้วเข้าไปในอาร์เรย์ด้วย push
get items() {
return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }การกำหนดค่าคอนโทรลอย่างชัดเจน
หากต้องการใช้ nonNullable กับคอนโทรลเดี่ยว ให้ส่งออบเจ็กต์ตัวเลือกแทนการใช้ทูเพิล
token: this.fb.control('', { nonNullable: true })ควรใช้ FormBuilder เมื่อใด
ใช้ FormBuilder เพื่อให้อ่านง่ายในฟอร์มขนาดใหญ่ เอพีไอ new FormControl ที่ระบุอย่างชัดเจนให้ผลเทียบเท่ากัน และบางครั้งอ่านง่ายกว่าสำหรับคอนโทรลที่ใช้เฉพาะครั้ง
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับรูปแบบการใช้ FormBuilder
สรุปทบทวน
คุณได้เรียนรู้ว่า FormBuilder (fb.group, fb.control, fb.array) ช่วยลดโค้ดซ้ำซ้อน ทูเพิลใช้เก็บค่าและตัวตรวจสอบ และ fb.nonNullable สร้างคอนโทรลที่ไม่เป็นค่าว่าง ซึ่งการรีเซ็ตจะคืนค่าเริ่มต้น
คำถามที่พบบ่อย
บทเรียน “รูปแบบการใช้ FormBuilder” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “รูปแบบการใช้ FormBuilder” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการใช้ FormBuilder”
สร้างฟอร์มซับซ้อนด้วย FormBuilder คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “รูปแบบการใช้ FormBuilder” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟอร์มรีแอกทีฟแบบมีชนิดข้อมูล
- FormArray และฟิลด์แบบไดนามิก
- ตัวตรวจสอบแบบอะซิงโครนัส
- รูปแบบการใช้ FormBuilder