อินเทอร์เฟซ ControlValueAccessor
เชื่อมวิดเจ็ตกำหนดเองเข้ากับฟอร์ม Angular
อินเทอร์เฟซ ControlValueAccessor เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ต้องใช้ตัวควบคุมแบบกำหนดเอง
ฟอร์ม Angular ทำงานร่วมกับอินพุตดั้งเดิมได้ทันที หากต้องการให้คอมโพเนนต์ของคุณเอง เช่น วิดเจ็ตให้คะแนน ตัวเลือกสี หรือสวิตช์ ใช้กับ ngModel และ formControlName ได้ คอมโพเนนต์นั้นต้องใช้งาน ControlValueAccessor
สะพานเชื่อม
ControlValueAccessor (CVA) เป็นสะพานเชื่อมระหว่างโมเดลฟอร์มของ Angular กับมุมมองของคอมโพเนนต์ โดยกำหนดวิธีที่โมเดลเขียนค่าเข้าไป และวิธีส่งการเปลี่ยนแปลงของผู้ใช้กลับออกมา
อินเทอร์เฟซ
CVA ต้องมีเมธอดสี่รายการ ได้แก่ writeValue, registerOnChange, registerOnTouched และ setDisabledState ซึ่งเป็นตัวเลือกเสริม
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}ลงทะเบียนผู้ให้บริการ
แจ้ง Angular ว่าคอมโพเนนต์ของคุณเป็นตัวเข้าถึงค่า โดยจัดเตรียม NG_VALUE_ACCESSOR พร้อม multi: true และ useExisting ที่ชี้ไปยังคอมโพเนนต์
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]เหตุผลที่ต้องใช้ forwardRef
ต้องใช้ forwardRef เพราะคลาสอ้างอิงตัวเองในข้อมูลกำกับของตัวเองก่อนที่จะประกาศคลาส การใช้สิ่งนี้จะเลื่อนการแก้การอ้างอิงออกไปจนกว่าคลาสจะมีอยู่
โครงสร้างคอมโพเนนต์
ตัวควบคุมแบบกำหนดเองจะประกาศผู้ให้บริการและใช้งานเมธอดของอินเทอร์เฟซ คลาสจะเก็บค่าปัจจุบันไว้ภายใน
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}ใช้งานเหมือนอินพุตดั้งเดิม
เมื่อใช้งาน CVA แล้ว คอมโพเนนต์ของคุณจะเชื่อมต่อกับฟอร์มแบบใช้เทมเพลตและฟอร์มแบบรีแอกทีฟได้เหมือนอินพุตดั้งเดิมทุกประการ
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>ข้อมูลสองทิศทาง
ข้อมูลจากโมเดลไปยังมุมมองจะไหลผ่าน writeValue (Angular ส่งค่าฟอร์มเข้าไป) ส่วนข้อมูลจากมุมมองไปยังโมเดลจะไหลผ่านการเรียกกลับที่ลงทะเบียนไว้ใน registerOnChange (คุณส่งการเปลี่ยนแปลงของผู้ใช้ออกไป)
ติดตามสถานะ touched
ประสบการณ์ผู้ใช้ในการตรวจสอบฟอร์มขึ้นอยู่กับสถานะ touched คุณแจ้ง Angular ได้ผ่านการเรียกกลับจาก registerOnTouched โดยทั่วไปจะเรียกเมื่อองค์ประกอบสูญเสียโฟกัส
สถานะปิดใช้งาน
เมื่อฟอร์มปิดใช้งานตัวควบคุม (control.disable()) Angular จะเรียก setDisabledState เพื่อให้คอมโพเนนต์ของคุณแสดงสถานะดังกล่าวทางภาพและไม่รับอินพุต
แผนการเรียนรู้
บทเรียนถัดไปจะลงมือทำแต่ละส่วน ได้แก่ การเขียนและลงทะเบียนค่า การจัดการสถานะปิดใช้งานและสถานะ touched รวมถึงการเพิ่มการตรวจสอบ ทั้งหมดนี้จะทำให้ตัวควบคุมแบบกำหนดเองผสานรวมได้อย่างสมบูรณ์
ตรวจสอบความเข้าใจ
ตรวจสอบพื้นฐาน CVA ของคุณ
สรุป
คุณได้เรียนรู้ว่า ControlValueAccessor เชื่อมคอมโพเนนต์แบบกำหนดเองเข้ากับฟอร์ม Angular ผ่านเมธอดสี่รายการ โดยลงทะเบียนผ่าน NG_VALUE_ACCESSOR พร้อม forwardRef และ multi: true ขั้นต่อไปคือการลงมือเขียนและลงทะเบียนค่า
คำถามที่พบบ่อย
บทเรียน “อินเทอร์เฟซ ControlValueAccessor” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อินเทอร์เฟซ ControlValueAccessor” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อินเทอร์เฟซ ControlValueAccessor”
เชื่อมวิดเจ็ตกำหนดเองเข้ากับฟอร์ม Angular คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “อินเทอร์เฟซ ControlValueAccessor” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินเทอร์เฟซ ControlValueAccessor
- การเขียนและลงทะเบียนค่า
- การจัดการสถานะปิดใช้งานและถูกแตะ
- การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง