การตรวจสอบความถูกต้องแบบกำหนดเองในฟอร์ม Angular

เรียนรู้วิธีใช้ตัวตรวจสอบความถูกต้องแบบกำหนดเอง เพื่อให้การตรวจสอบฟอร์มในแอปพลิเคชัน Angular ของคุณมีความรัดกุม

การตรวจสอบความถูกต้องแบบกำหนดเองคืออะไร

ตัวตรวจสอบความถูกต้องแบบกำหนดเองช่วยให้คุณกำหนดตรรกะการตรวจสอบของตนเองได้ นอกเหนือจากตัวตรวจสอบที่มีมาให้ เช่น required หรือ minlength

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

ตัวตรวจสอบความถูกต้องแบบกำหนดเองคือฟังก์ชันอย่างง่ายที่ส่งคืนค่า null เมื่อข้อมูลถูกต้อง หรือส่งคืนออบเจ็กต์เมื่อข้อมูลไม่ถูกต้อง:

function forbiddenNameValidator(control: AbstractControl): { [key: string]: any } | null {
  return control.value === 'admin' ? { 'forbiddenName': true } : null;
}

การใช้ตัวตรวจสอบความถูกต้อง

ใช้ตัวตรวจสอบความถูกต้องแบบกำหนดเองกับตัวควบคุมฟอร์มของคุณ:

this.myForm = new FormGroup({
  username: new FormControl('', [forbiddenNameValidator])
});

การแสดงข้อผิดพลาดในการตรวจสอบความถูกต้อง

แสดงข้อความข้อผิดพลาดตามเงื่อนไขในเทมเพลต โดยอิงตามสถานะการตรวจสอบความถูกต้อง:

<div *ngIf="myForm.get('username').hasError('forbiddenName')">
  Username 'admin' is not allowed.
</div>

การใช้คำสั่งตัวตรวจสอบความถูกต้อง

นอกจากนี้ยังสามารถใช้ตัวตรวจสอบความถูกต้องโดยตรงในรูปคำสั่งสำหรับฟอร์มแบบควบคุมด้วยเทมเพลตได้:

<input name="username" ngModel forbiddenName>

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

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

username: new FormControl('', null, [asyncValidator])

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

ควรทดสอบตัวตรวจสอบความถูกต้องเสมอ เพื่อให้มั่นใจว่าทำงานถูกต้องในสถานการณ์และกรณีขอบต่าง ๆ

สรุป

คุณเรียนรู้การสร้างและใช้ตัวตรวจสอบความถูกต้องแบบกำหนดเอง เพื่อการตรวจสอบฟอร์ม Angular ที่รัดกุมแล้ว ทำได้ยอดเยี่ยมครับ/ค่ะ!