Sự khác biệt giữa template-driven form và reactive form là gì?

Question

IT Interview Practice · Accepted Answer

Angular cung cấp **hai cách tiếp cận** với form. Form **template-driven** đơn giản và được định nghĩa trong HTML; form **reactive** được định nghĩa trong TypeScript và cho nhiều kiểm soát hơn — tốt hơn cho các form phức tạp, động, hoặc validate nhiều. ## Template-driven — logic trong template ```ts // chỉ cần import FormsModule; TS tối thiểu ``` ```html ``` Cấu trúc form và validation nằm trong **template** thông qua các directive `ngModel`. Đơn giản để thiết lập, nhưng mô hình form là ngầm định và khó test/thao tác bằng code hơn. ## Reactive — mô hình form trong TypeScript ```ts 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); } } ``` ```html ``` Form là một **đối tượng tường minh** (`FormGroup`/`FormControl`) mà bạn dựng trong TS. Điều này khiến nó observable được, test được, và dễ thao tác (thêm/xóa field, phản ứng với thay đổi qua `valueChanges`). ## So sánh ```text Template-driven Reactive Định nghĩa ở đâu HTML (ngModel) TypeScript (FormBuilder) Mô hình form ngầm định/async đối tượng tường minh, đồng bộ Validation directive trong template validator trong code Form động khó dễ (thêm/xóa control trong code) Khả năng test khó hơn dễ dàng (chỉ là một đối tượng) Tốt nhất cho form đơn giản form phức tạp/động/validate nhiều ``` ## Reactive form phơi bày các luồng ```ts this.form.get("email")!.valueChanges.subscribe(v => ...); // phản ứng với thay đổi this.form.valid; // kiểm tra tính hợp lệ đồng bộ ``` ## Tại sao điều này quan trọng Chọn đúng cách tiếp cận form quan trọng cho tính bảo trì: **template-driven** cho các form nhanh, đơn giản; **reactive** cho bất cứ thứ gì phức tạp — wizard nhiều bước, tập field động, validate liên field, hoặc form cần unit test. Mô hình tường minh, observable của reactive form thường được ưa chuộng trong các ứng dụng nghiêm túc vì nó mạnh mẽ, test được, và mở rộng được hơn, dù đòi hỏi nhiều code ban đầu hơn.

Template-driven — logic trong template

Reactive — mô hình form trong TypeScript

So sánh

Reactive form phơi bày các luồng

Tại sao điều này quan trọng

Câu hỏi liên quan