ฟอร์มแบบควบคุมด้วยเทมเพลต

บทเรียนนี้จะแนะนำฟอร์มแบบควบคุมด้วยเทมเพลตใน Angular ซึ่งช่วยให้คุณสร้างฟอร์มง่าย ๆ ได้อย่างรวดเร็ว

ฟอร์มแบบควบคุมด้วยเทมเพลตคืออะไร

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

การนำเข้า FormsModule

หากต้องการใช้ฟอร์มแบบควบคุมด้วยเทมเพลต ให้นำเข้า FormsModule ในโมดูล Angular ของคุณ:

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

การสร้างฟอร์มอย่างง่าย

กำหนดฟอร์มอย่างง่ายในเทมเพลตโดยใช้คำสั่ง ngForm:

<form #form="ngForm">
  <input name="username" ngModel>
</form>

การผูกข้อมูลสองทางด้วย ngModel

ngModel เชื่อมตัวควบคุมฟอร์มกับคุณสมบัติของคอมโพเนนต์โดยใช้การผูกข้อมูลสองทาง:

<input [(ngModel)]="user.name" name="username">

การส่งฟอร์ม

จัดการการส่งฟอร์มได้ง่าย ๆ โดยใช้การผูกเหตุการณ์ของ Angular:

<form (ngSubmit)="onSubmit(form)" #form="ngForm">

การตรวจสอบความถูกต้องของฟอร์ม

Angular มีคำสั่งสำหรับตรวจสอบความถูกต้องที่ใช้งานง่าย เช่น required และ minlength:

<input name="username" ngModel required minlength="4">

การเข้าถึงสถานะฟอร์ม

เข้าถึงสถานะฟอร์ม เช่น ความถูกต้องหรือสถานะการแตะฟอร์มแล้ว ผ่านตัวแปรของเทมเพลต:

<div *ngIf="form.invalid && form.touched">Form is invalid!</div>

สรุป

คุณเรียนรู้การสร้าง ผูกข้อมูล ตรวจสอบความถูกต้อง และส่งฟอร์มด้วยฟอร์มแบบควบคุมด้วยเทมเพลตได้อย่างง่ายดายแล้ว หมั่นฝึกฝนต่อไปนะครับ/ค่ะ!