AngularHai cách build form trong Angular:
| Template-driven | Reactive | |
|---|---|---|
| Khai báo | Trong template (ngModel) | Trong class (FormGroup/FormControl) |
| Form model | Angular tự tạo ngầm | Dev định nghĩa tường minh |
| Validation | Directive trên template | Validator function trong code |
| Async/dynamic | Khó | Dễ (thêm/bớt control runtime) |
| Test | Khó (phụ thuộc DOM) | Dễ (test model trực tiếp) |
typescript
// Reactive
form = new FormGroup({
email: new FormControl("", [Validators.required, Validators.email]),
})Chọn: Template-driven cho form đơn giản; Reactive cho form phức tạp, dynamic, cần test — production thường ưu tiên Reactive.
Lưu ý 2026: Angular đang phát triển Signal Forms (@angular/forms/signals, experimental) quản lý state từ signal model — đáng theo dõi nhưng chưa nên dùng cho form business-critical.
Two ways to build forms in Angular:
| Template-driven | Reactive | |
|---|---|---|
| Declaration | In the template (ngModel) | In the class (FormGroup/FormControl) |
| Form model | Created implicitly by Angular | Defined explicitly by the dev |
| Validation | Directives in the template | Validator functions in code |
| Async/dynamic | Hard | Easy (add/remove controls at runtime) |
| Testability | Hard (DOM-dependent) | Easy (test the model directly) |
typescript
// Reactive
form = new FormGroup({
email: new FormControl("", [Validators.required, Validators.email]),
})Choose: Template-driven for simple forms; Reactive for complex, dynamic, testable forms — production usually prefers Reactive.
2026 note: Angular is developing Signal Forms (@angular/forms/signals, experimental) that manage state from a signal model — worth watching but not yet for business-critical forms.