การเขียนและลงทะเบียนค่า
ใช้งาน writeValue และคอลแบ็กสำหรับการเปลี่ยนแปลง
การเขียนและลงทะเบียนค่า เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เมธอดหลักสองรายการ
หัวใจของตัวเข้าถึงค่าคือการส่งข้อมูลสองทาง: writeValue นำค่าจากโมเดลเข้าสู่มุมมองของคุณ ส่วนการเรียกกลับจาก registerOnChange จะส่งการแก้ไขของผู้ใช้กลับไปยังโมเดล
writeValue
Angular เรียก writeValue เมื่อฟอร์มกำหนดค่าหรือรีเซ็ตค่าของตัวควบคุม ให้เก็บค่านั้นไว้ในสถานะของคอมโพเนนต์ เพื่อให้มุมมองแสดงค่าดังกล่าว
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}จัดการค่า Null
writeValue อาจได้รับค่า null เมื่อรีเซ็ต ให้ปรับค่าให้เป็นค่าเริ่มต้นที่ปลอดภัย เพื่อไม่ให้เทมเพลตทำงานผิดพลาด
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular จะส่งการเรียกกลับให้คุณเรียกใช้ทุกครั้งที่ค่ามีการเปลี่ยนแปลง ให้บันทึกการเรียกกลับนี้ไว้ แล้วเรียกใช้เมื่อผู้ใช้โต้ตอบ
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}ส่งการเปลี่ยนแปลง
เมื่อผู้ใช้โต้ตอบ ให้ปรับปรุงสถานะภายใน แล้วเรียกการเรียกกลับ onChange ที่บันทึกไว้พร้อมค่าใหม่ เพื่ออัปเดตโมเดลฟอร์ม
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}เชื่อมโยงเทมเพลต
เทมเพลตจะแสดงสถานะปัจจุบันและเรียกตัวจัดการเมื่อผู้ใช้ดำเนินการ จากนั้นตัวจัดการจะเรียก onChange
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'ทำให้มุมมองตรงกัน
เนื่องจาก writeValue อัปเดตสถานะภายในและเทมเพลตผูกกับสถานะนั้น การเปลี่ยนแปลงฟอร์มโดยทางโปรแกรม เช่น patchValue จึงสะท้อนในคอมโพเนนต์ของคุณทันที
เหมาะกับ OnPush
เมื่อใช้การตรวจจับการเปลี่ยนแปลงแบบ OnPush ให้อัปเดตสถานะผ่านฟิลด์ของคอมโพเนนต์ แล้วปล่อยให้การผูกข้อมูลตอบสนอง หากคุณเปลี่ยนค่าในแหล่งข้อมูลแบบอะซิงโครนัส ให้ทำเครื่องหมายเพื่อตรวจสอบหรือใช้สัญญาณ เพื่อให้มุมมองเป็นปัจจุบัน
อย่าเรียก onChange ใน writeValue
สำคัญ: อย่าเรียก onChange จากภายใน writeValue เด็ดขาด เพราะจะทำให้การอัปเดตโดยทางโปรแกรมถูกส่งย้อนกลับเข้าโมเดล และอาจทำให้เกิดลูปได้ onChange มีไว้สำหรับการเปลี่ยนแปลงที่เกิดจากผู้ใช้เท่านั้น
การกำหนดชนิดของค่า
กำหนดชนิดค่าที่เป็นรูปธรรมให้กับตัวควบคุมของคุณ (เช่น number, string หรืออินเทอร์เฟซที่สร้างขึ้นเอง) และกำหนดชนิดให้เมธอดต่าง ๆ อย่างเหมาะสม เพื่อให้ทำงานร่วมกับฟอร์มแบบรีแอกทีฟได้อย่างปลอดภัยยิ่งขึ้น
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}ผลลัพธ์จนถึงตอนนี้
เมื่อใช้งาน writeValue และ registerOnChange แล้ว ตัวควบคุมจะอ่านข้อมูลจากและเขียนข้อมูลลงในโมเดลฟอร์ม ขั้นต่อไปคือการเพิ่มการจัดการสถานะปิดใช้งานและสถานะถูกแตะ เพื่อให้ UX ครบถ้วน
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับการเขียนค่าของคุณ
สรุปทบทวน
คุณได้ใช้งาน writeValue (จากโมเดลไปยังมุมมอง โดยจัดการค่า null) และใช้ callback registerOnChange เพื่อส่งการเปลี่ยนแปลงจากผู้ใช้ (จากมุมมองไปยังโมเดล) เชื่อมโยงเทมเพลต และเรียนรู้ว่าไม่ควรเรียก onChange จาก writeValue
คำถามที่พบบ่อย
บทเรียน “การเขียนและลงทะเบียนค่า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเขียนและลงทะเบียนค่า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเขียนและลงทะเบียนค่า”
ใช้งาน writeValue และคอลแบ็กสำหรับการเปลี่ยนแปลง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเขียนและลงทะเบียนค่า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินเทอร์เฟซ ControlValueAccessor
- การเขียนและลงทะเบียนค่า
- การจัดการสถานะปิดใช้งานและถูกแตะ
- การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง