Angular นำเสนอ สองวิธี สำหรับแบบฟอร์ม แบบฟอร์ม template-driven เป็นแบบง่ายและกำหนดไว้ใน HTML; แบบฟอร์ม reactive ถูกกำหนดไว้ใน TypeScript และให้การควบคุมมากขึ้น — ดีกว่าสำหรับแบบฟอร์มที่ซับซ้อน แบบไดนามิก หรือตรวจสอบความถูกต้องอย่างหนัก
// just import FormsModule; minimal TS
Submit
โครงสร้างแบบฟอร์มและการตรวจสอบความถูกต้องอยู่ใน เทมเพลต ผ่านคำสั่ง ngModel ตั้งค่าได้ง่าย แต่โมเดลแบบฟอร์มเป็นแบบปริยาย และยากต่อการทดสอบ/จัดการโดยทางโปรแกรม
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
แบบฟอร์มคือ object ที่ชัดเจน (FormGroup/FormControl) ที่คุณสร้างใน TS สิ่งนี้ทำให้มันสังเกตได้ ทดสอบได้ และจัดการได้ง่าย (เพิ่ม/ลบฟิลด์ ตอบสนองต่อการเปลี่ยนแปลงผ่าน valueChanges)
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
การเลือกวิธีแบบฟอร์มที่ถูกต้องมีความสำคัญต่อการดูแลรักษา: template-driven สำหรับแบบฟอร์มที่รวดเร็วและเรียบง่าย; reactive สำหรับสิ่งที่ซับซ้อน — วิซาร์ดหลายขั้นตอน ชุดฟิลด์ไดนามิก การตรวจสอบความถูกต้องข้ามฟิลด์ หรือแบบฟอร์มที่ต้องการการทดสอบหน่วย
โมเดลที่ชัดเจนและสังเกตได้ของ reactive forms โดยทั่วไปจะเป็นที่นิยมในแอปพลิเคชันที่จริงจังเพราะมีความทรงพลัง ทดสอบได้ และปรับขนาดได้ แม้ว่าจะต้องใช้รหัสข้างหน้ามากขึ้น