Angular Academy · บทเรียน

การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง

จัดเตรียมตัวตรวจสอบจากตัวควบคุมกำหนดเอง

การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

ตัวควบคุมที่ตรวจสอบความถูกต้องด้วยตนเอง

ตัวควบคุมแบบกำหนดเองสามารถมีตรรกะการตรวจสอบความถูกต้องของตัวเองได้ โดยใช้อินเทอร์เฟซ Validator และลงทะเบียนกับ NG_VALIDATORS ทำให้ผู้ใช้ตัวควบคุมได้รับข้อมูลความถูกต้องโดยไม่ต้องตั้งค่าเพิ่มเติม

อินเทอร์เฟซ Validator

Validator ต้องมีเมธอด validate ซึ่งคืนค่า ValidationErrors (แผนผังข้อผิดพลาด) หรือ null เมื่อค่าถูกต้อง

import { Validator, ValidationErrors, AbstractControl } from '@angular/forms';

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

การลงทะเบียน NG_VALIDATORS

เพิ่มผู้ให้บริการแบบหลายค่ารายการตัวที่สองสำหรับ NG_VALIDATORS ควบคู่กับ NG_VALUE_ACCESSOR โดยใช้ forwardRef เช่นเดิม

import { NG_VALIDATORS } from '@angular/forms';

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

การคืนค่าแผนผังข้อผิดพลาด

คีย์ในแผนผังข้อผิดพลาดจะกลายเป็นรายการใน control.errors ใช้คีย์ที่สื่อความหมายและข้อมูลประกอบที่ไม่บังคับ เพื่อให้เทมเพลตแสดงข้อความที่ตรงกับข้อผิดพลาดได้

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

การนำข้อผิดพลาดไปใช้

เทมเพลตอ่าน control.errors เช่นเดียวกับที่อ่านจากตัวตรวจสอบความถูกต้องในตัว โดยแสดงข้อความเมื่อตัวควบคุมไม่ถูกต้องและถูกแตะแล้ว

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

การทำงานร่วมกับตัวตรวจสอบภายนอก

ตัวตรวจสอบจากตัวควบคุมและตัวตรวจสอบที่ผู้ใช้ส่งเข้ามาในฟอร์มแบบรีแอกทีฟจะทำงานและรวมผลลัพธ์เข้าด้วยกัน กฎของตัวควบคุมจะเพิ่มเข้ากับกฎของฟอร์ม ไม่ได้แทนที่กฎเหล่านั้น

stars: [0, [Validators.required]] // plus the control's own validate()

การตรวจสอบความถูกต้องแบบไดนามิก

หากการตรวจสอบความถูกต้องขึ้นอยู่กับ input ที่เปลี่ยนแปลง ให้เรียก callback การเปลี่ยนแปลงที่ลงทะเบียนไว้ เพื่อแจ้ง Angular ให้เรียกใช้การตรวจสอบความถูกต้องอีกครั้ง

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

การตรวจสอบความถูกต้องแบบอะซิงโครนัส

สำหรับการตรวจสอบกับเซิร์ฟเวอร์ ให้ใช้งาน AsyncValidator โดยมี validate ที่คืนค่า Observable หรือ Promise ของข้อผิดพลาด และลงทะเบียนกับ NG_ASYNC_VALIDATORS

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

มุ่งเน้นเฉพาะสิ่งจำเป็น

ใส่เฉพาะการตรวจสอบที่เป็นคุณสมบัติเฉพาะของตัวควบคุมไว้ภายใน (เช่น rating ต้องมากกว่าศูนย์) ส่วนกฎเฉพาะทางธุรกิจควรปล่อยให้ฟอร์มที่นำไปใช้เป็นผู้จัดการ เพื่อให้สามารถนำกลับมาใช้ซ้ำได้

การทดสอบการตรวจสอบความถูกต้อง

ทดสอบหน่วยของ validate โดยตรง ด้วยการส่งตัวควบคุมจำลองที่มีค่าเข้าไป และตรวจสอบแผนผังข้อผิดพลาดหรือค่า null ที่คืนกลับมา

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

ตัวควบคุมแบบกำหนดเองที่สมบูรณ์

เมื่อใช้งานตัวเข้าถึงค่า การปิดใช้งาน สถานะถูกแตะ และการตรวจสอบความถูกต้องครบแล้ว component ของคุณจะเป็นตัวควบคุมฟอร์มที่สมบูรณ์และนำกลับมาใช้ซ้ำได้ ผู้ใช้จะมองไม่เห็นความแตกต่างจาก input ดั้งเดิม

ตรวจสอบอย่างรวดเร็ว

ตรวจสอบความรู้เกี่ยวกับการตรวจสอบความถูกต้องของคุณ

สรุปทบทวน

คุณได้เพิ่มการตรวจสอบความถูกต้องด้วยการใช้งาน Validator.validate ลงทะเบียน NG_VALIDATORS คืนค่าแผนผังข้อผิดพลาด รองรับการตรวจสอบใหม่แบบไดนามิกผ่าน registerOnValidatorChange และเลือกใช้ AsyncValidator กับ NG_ASYNC_VALIDATORS เพื่อให้ตัวควบคุมแบบกำหนดเองผสานรวมได้อย่างสมบูรณ์

คำถามที่พบบ่อย

บทเรียน “การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง”

จัดเตรียมตัวตรวจสอบจากตัวควบคุมกำหนดเอง คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

อินเทอร์เฟซ ControlValueAccessor
การเขียนและลงทะเบียนค่า
การจัดการสถานะปิดใช้งานและถูกแตะ
การตรวจสอบความถูกต้องในตัวควบคุมกำหนดเอง

← กลับไปที่ Angular Academy