การจัดการสถานะปิดใช้งานและถูกแตะ
สะท้อนสถานะฟอร์มในตัวควบคุมของคุณ
การจัดการสถานะปิดใช้งานและถูกแตะ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
นอกเหนือจากค่า
ตัวควบคุมแบบกำหนดเองที่สมบูรณ์ต้องรองรับแนวคิดของฟอร์มเพิ่มอีกสองอย่าง ได้แก่ สถานะ disabled และสถานะ touched ทั้งสองสถานะนี้ใช้ควบคุม UX และการแสดงผลการตรวจสอบความถูกต้อง
setDisabledState
Angular จะเรียก setDisabledState เมื่อตัวควบคุมฟอร์มถูกปิดใช้งานหรือเปิดใช้งานอีกครั้ง (เช่นผ่าน control.disable()) ให้สะท้อนสถานะนี้ใน component ของคุณ
disabled = false;
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}การสะท้อนสถานะปิดใช้งานในมุมมอง
ใช้แฟล็ก disabled เพื่อกำหนดรูปแบบให้ตัวควบคุมและบล็อกการโต้ตอบ เพื่อไม่ให้ผู้ใช้เปลี่ยนค่าในฟิลด์ที่ถูกปิดใช้งาน
template: '<button [disabled]="disabled" (click)="select(s)">star</button>'การป้องกันตัวจัดการเหตุการณ์
ควรป้องกันตัวจัดการการเปลี่ยนแปลงด้วย เพื่อให้การโต้ตอบที่เกิดจากโปรแกรมหรือแป้นพิมพ์ไม่ทำงานขณะปิดใช้งาน
select(rating: number): void {
if (this.disabled) return;
this.value = rating;
this.onChange(rating);
}registerOnTouched
Angular จะส่ง callback สำหรับทำเครื่องหมายว่าตัวควบคุมถูกแตะแล้ว ให้บันทึก callback นี้ไว้เช่นเดียวกับที่บันทึก onChange
private onTouched: () => void = () => {};
registerOnTouched(fn: () => void): void {
this.onTouched = fn;
}การเรียก onTouched
เรียก callback สำหรับสถานะถูกแตะเมื่อผู้ใช้ออกจากตัวควบคุม โดยทั่วไปคือเมื่อเกิด blur การทำเช่นนี้จะแจ้ง Angular ว่าผู้ใช้โต้ตอบกับตัวควบคุมแล้ว และเปิดใช้ข้อความตรวจสอบความถูกต้องตามสถานะถูกแตะ
onBlur(): void {
this.onTouched();
}เหตุผลที่สถานะถูกแตะมีความสำคัญ
UX ของการตรวจสอบความถูกต้องมักแสดงข้อผิดพลาดหลังจากที่ผู้ใช้แตะฟิลด์แล้วเท่านั้น หากไม่เรียก onTouched ค่า control.touched จะยังคงเป็น false และข้อความข้อผิดพลาดอาจไม่ปรากฏในเวลาที่เหมาะสม
<small *ngIf="control.touched && control.invalid">Required</small>การเชื่อมโยง Blur
เชื่อมต่อตัวจัดการ blur ในเทมเพลต เพื่อให้การออกจากตัวควบคุมทำเครื่องหมายว่าตัวควบคุมถูกแตะแล้ว
template: '<div (blur)="onBlur()" tabindex="0">...</div>'รูปแบบการปิดใช้งานแบบรีแอกทีฟ
ควรปิดใช้งานผ่าน API ของฟอร์ม (control.disable()) แทนการผูก disabled ในเทมเพลต เพื่อให้ Angular เรียกใช้ setDisabledState ได้อย่างสม่ำเสมอ
this.form.get('stars')?.disable();การเข้าถึงได้
สะท้อนสถานะปิดใช้งานและสถานะโฟกัสโดยคำนึงถึงการเข้าถึงได้: กำหนด aria-disabled จัดการ tabindex และตรวจสอบให้ผู้ใช้แป้นพิมพ์สามารถทำให้เกิด blur เพื่อเรียกใช้สถานะถูกแตะ ทำให้ทุกคนใช้งานตัวควบคุมได้
ผสานรวมอย่างสมบูรณ์แล้ว
เมื่อจัดการค่า สถานะปิดใช้งาน และสถานะถูกแตะครบแล้ว ตัวควบคุมของคุณจะทำงานเหมือน input ดั้งเดิมทั้งในฟอร์มแบบรีแอกทีฟและฟอร์มที่ขับเคลื่อนด้วยเทมเพลต ส่วนสุดท้ายคือการตรวจสอบความถูกต้อง
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบความรู้เกี่ยวกับสถานะปิดใช้งานและสถานะถูกแตะของคุณ
สรุปทบทวน
คุณได้จัดการ setDisabledState (สะท้อนและป้องกันการทำงานเมื่อปิดใช้งาน) และ registerOnTouched (เรียกเมื่อเกิด blur เพื่อทำเครื่องหมายว่าถูกแตะ และเปิดใช้ UX ของการตรวจสอบความถูกต้อง) ควรใช้ API ของฟอร์มเพื่อควบคุมสถานะปิดใช้งาน และทำให้ตัวควบคุมเข้าถึงได้
คำถามที่พบบ่อย
บทเรียน “การจัดการสถานะปิดใช้งานและถูกแตะ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดการสถานะปิดใช้งานและถูกแตะ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดการสถานะปิดใช้งานและถูกแตะ”
สะท้อนสถานะฟอร์มในตัวควบคุมของคุณ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดการสถานะปิดใช้งานและถูกแตะ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อินเทอร์เฟซ ControlValueAccessor
- การเขียนและลงทะเบียนค่า
- การจัดการสถานะปิดใช้งานและถูกแตะ
- การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง