Routing & Forms

Mục lụcCopy Anchor Link

• Tổng quan
• Mục tiêu sau nhóm này
• Đầu vào và cách học
• Mô hình tinh thần router và form
  • Router: từ URL đến trạng thái giao diện
  • Form: từ thao tác nhập đến dữ liệu miền
• Thứ tự các bài học
• Lộ trình thực hành
  • Giai đoạn 1: lập bản đồ điều hướng
  • Giai đoạn 2: thêm ngữ cảnh và hiệu năng
  • Giai đoạn 3: tạo form đáng tin cậy
  • Giai đoạn 4: mở rộng theo dữ liệu
• Checklist hoàn thành
• Bắt đầu học

Tổng quanCopy Anchor Link

Routing quyết định người dùng nhìn thấy màn hình nào khi URL thay đổi. Forms quản lý dữ liệu người dùng nhập trước khi dữ liệu đó được gửi đến nghiệp vụ hoặc API. Hai phần này thường gặp nhau trong cùng một feature: mở trang chi tiết từ một tham số URL, nạp dữ liệu của bản ghi đó, hiển thị form chỉnh sửa và điều hướng đi khi lưu thành công.

Nhóm bài này dùng cách tiếp cận Angular hiện đại, ưu tiên standalone component, cấu hình route rõ ràng và Reactive Forms. Mục tiêu không phải là ghi nhớ mọi API ngay từ đầu. Hãy học cách dữ liệu đi qua ứng dụng, sau đó chọn API phù hợp cho từng bước.

Mục tiêu sau nhóm nàyCopy Anchor Link

Khi hoàn thành, bạn có thể:

• Khai báo route, đặt router-outlet, tạo liên kết và đọc path/query parameters bằng Angular Router.
• Chia cấu trúc route theo feature, dùng route lồng nhau và lazy loading qua Nested và lazy routes.
• Chặn hoặc chuyển hướng có chủ đích, đồng thời chuẩn bị dữ liệu trước khi component hiển thị với Guard và resolver.
• Mô hình hóa dữ liệu form bằng FormControl, FormGroup và FormArray trong Reactive Forms.
• Hiển thị lỗi đúng thời điểm, kết hợp validator đồng bộ và bất đồng bộ trong Validation.
• Giữ an toàn kiểu dữ liệu và sinh giao diện form từ schema bằng Typed và dynamic forms.

Đầu vào và cách họcCopy Anchor Link

Trước khi bắt đầu, bạn nên đã quen với component standalone, template binding, dependency injection cơ bản và TypeScript. Bạn không cần biết sẵn Router hay Forms, nhưng nên có một ứng dụng Angular chạy được để thử từng thay đổi nhỏ.

Chuẩn bị một feature thực hành có các màn hình sau:

Cách học hiệu quả là đọc một bài, thay đổi một phần của feature, rồi tự kiểm tra trên trình duyệt. Đừng chờ đến cuối nhóm mới ghép mọi thứ lại; một route hoặc một validator nhỏ chạy đúng đã là phản hồi tốt để đi tiếp.

Mô hình tinh thần router và formCopy Anchor Link

Router và form đều quản lý trạng thái, nhưng nguồn thay đổi của chúng khác nhau. Router biến URL thành cây component đang hiển thị. Form biến các thao tác nhập thành một mô hình dữ liệu có giá trị, trạng thái hợp lệ và lỗi.

direction: right

n0: "URL đổi / bấm liên kết" {
  width: 200
  height: 58
}

n1: "Angular Router\nKhớp route →\nguard/resolver → UI" {
  width: 176
  height: 79
}

n2: "Component màn hình" {
  width: 168
  height: 58
}

n3: "Reactive Form\nInput → controls →\nvalidation" {
  width: 168
  height: 79
}

n0 -> n1
n1 -> n2
n2 -> n3

direction: right

n3: "Reactive Form\nInput → controls →\nvalidation" {
  width: 168
  height: 79
}

n4: "Dữ liệu hợp lệ\nCho nghiệp vụ / API" {
  width: 176
  height: 58
}

n3 -> n4

Router: từ URL đến trạng thái giao diệnCopy Anchor Link

Một route là quy tắc ghép một URL với component hoặc feature cần hiển thị. Ví dụ, /products/42/edit có thể khớp route products/:id/edit; 42 trở thành path parameter để component biết sản phẩm nào cần sửa.

Trước khi component được kích hoạt, Router có thể chạy guard để quyết định có được đi tiếp hay không. Resolver có thể nạp dữ liệu cần thiết trước khi trang xuất hiện. Route lồng nhau giúp biểu diễn phần giao diện dùng chung, còn lazy loading trì hoãn tải code của feature cho đến khi người dùng cần nó.

Tóm lại: URL nên là nguồn sự thật cho vị trí và ngữ cảnh điều hướng. Đừng tự tạo nhiều biến cục bộ chỉ để mô phỏng URL hiện tại.

Form: từ thao tác nhập đến dữ liệu miềnCopy Anchor Link

Reactive Form đặt mô hình form trong class TypeScript. Mỗi FormControl giữ giá trị và trạng thái của một trường; FormGroup gom các trường liên quan; FormArray quản lý danh sách trường có độ dài thay đổi, chẳng hạn các thẻ của sản phẩm.

Khi người dùng nhập, control cập nhật giá trị rồi chạy validator. Chỉ khi form hợp lệ, component mới chuyển dữ liệu sang service hoặc API. Với typed forms, TypeScript hỗ trợ phát hiện trường bị thiếu hoặc sai kiểu ngay khi viết mã.

Tóm lại: form là nguồn sự thật cho dữ liệu đang soạn thảo. Tránh đọc trực tiếp từng phần tử DOM khi dữ liệu đã thuộc về form model.

Thứ tự các bài họcCopy Anchor Link

Các bài được sắp xếp theo quan hệ phụ thuộc. Ba bài Router đi trước để bạn có màn hình và ngữ cảnh điều hướng ổn định. Ba bài Forms đi sau để bạn xây dữ liệu nhập trên chính các màn hình đó.

1. Angular Router — Bắt đầu với route config, router-outlet, routerLink và parameters. Đây là nền để ứng dụng có nhiều màn hình.
2. Nested và lazy routes — Tổ chức route của feature sau khi đã hiểu một route đơn. Học lazy loading khi feature bắt đầu có kích thước đáng kể.
3. Guard và resolver — Thêm điều kiện điều hướng và dữ liệu đầu vào cho màn hình chỉnh sửa. Bài này dựa trên cấu trúc route ở hai bài trước.
4. Reactive Forms — Tạo form sản phẩm bằng model TypeScript thay vì chỉ xử lý input trong template.
5. Validation — Bổ sung quy tắc dữ liệu và trải nghiệm thông báo lỗi cho form vừa tạo.
6. Typed và dynamic forms — Hoàn thiện bằng typed form và các trường động, chỉ nên học khi form tĩnh đã rõ ràng.

Lộ trình thực hànhCopy Anchor Link

Dùng cùng một feature sản phẩm xuyên suốt bốn giai đoạn. Mỗi giai đoạn tạo ra một mốc chạy được, vì vậy lỗi sẽ được khoanh vùng sớm thay vì dồn đến cuối.

Giai đoạn 1: lập bản đồ điều hướngCopy Anchor Link

• Tạo route cho danh sách, tạo mới, chỉnh sửa và trang không tìm thấy.
• Đặt router-outlet ở layout chính; dùng routerLink để đi từ danh sách sang tạo mới và chỉnh sửa.
• Đọc id từ URL tại trang chỉnh sửa và hiển thị nó trước khi nạp dữ liệu thật.

Mốc kiểm tra: tải trực tiếp /products/42/edit, làm mới trang và xác nhận ứng dụng vẫn biết đang ở trang chỉnh sửa sản phẩm 42.

Giai đoạn 2: thêm ngữ cảnh và hiệu năngCopy Anchor Link

• Đặt các route sản phẩm dưới một feature route hoặc route cha dùng chung layout.
• Lazy load feature sản phẩm để mã của feature chỉ được tải khi mở /products.
• Dùng resolver để nạp sản phẩm theo id; dùng guard phù hợp cho trang cần đăng nhập hoặc có dữ liệu chưa lưu.

Mốc kiểm tra: điều hướng đến trang chỉnh sửa chỉ khi dữ liệu cần thiết đã sẵn sàng; thử một URL id không tồn tại và quyết định rõ sẽ chuyển hướng hay hiển thị lỗi.

Giai đoạn 3: tạo form đáng tin cậyCopy Anchor Link

• Tạo FormGroup cho name, price, description và vá dữ liệu resolver vào form sửa.
• Thêm validator bắt buộc, độ dài tối thiểu và giá trị số hợp lệ.
• Chỉ gửi dữ liệu khi form hợp lệ; đánh dấu controls đã chạm khi người dùng bấm lưu để lỗi không xuất hiện quá sớm.

Mốc kiểm tra: để trống tên, nhập giá không hợp lệ, rồi sửa lại. Mỗi trạng thái phải có thông báo rõ ràng và nút lưu phải phản ánh tính hợp lệ của form.

Giai đoạn 4: mở rộng theo dữ liệuCopy Anchor Link

• Chuyển form sang typed forms để model sản phẩm và control khớp kiểu dữ liệu.
• Dùng FormArray cho danh sách thẻ hoặc biến thể sản phẩm.
• Thử xây một schema nhỏ để sinh các trường cấu hình được; giữ quy tắc nghiệp vụ phức tạp trong validator hoặc service thay vì template.

Mốc kiểm tra: thêm và xóa một phần tử động, lưu lại, rồi kiểm tra payload không có trường thiếu hoặc sai kiểu ngoài ý muốn.

Checklist hoàn thànhCopy Anchor Link

Trước khi rời nhóm bài này, hãy tự xác nhận:

• URL có thể mở trực tiếp và khôi phục đúng màn hình sau khi làm mới.
• Route feature được tổ chức theo trách nhiệm, không dồn mọi route vào một cấu hình lớn.
• Guard trả về kết quả điều hướng có chủ đích; API không dựa vào guard để bảo mật.
• Resolver, loading và trường hợp dữ liệu không tồn tại có trải nghiệm rõ ràng.
• Form có một model duy nhất, không trộn lẫn quá nhiều trạng thái input trong component.
• Lỗi validation chỉ xuất hiện vào thời điểm hợp lý và có hướng sửa cho người dùng.
• Payload gửi đi được kiểm soát kiểu dữ liệu, nhất là với trường động.

Bắt đầu họcCopy Anchor Link

Bắt đầu với Router để tạo khung màn hình cho feature, sau đó đi theo thứ tự cards bên dưới. Khi hoàn thành mỗi bài, quay lại feature sản phẩm và thực hiện đúng mốc kiểm tra của giai đoạn tương ứng.