Giới Thiệu

Trong phần trước, chúng ta đã khám phá RxJS và Change Detection. Bây giờ, trong Phần 3 của Câu Hỏi Phỏng Vấn Angular 20 (Bản 2025), chúng ta sẽ đi sâu vào:

• Forms & Validation (Q101–Q125)
• Routing & Guards (Q126–Q150)

Mục Lục

1. Forms & Validation (Q101–Q125)
2. Routing & Guards (Q126–Q150)
3. Thực Hành Tốt Nhất
4. Cạm Bẫy Thường Gặp
5. Mẹo Hiệu Suất
6. Khắc Phục Sự Cố

Forms & Validation (Q101–Q125)

Q101. Có mấy loại form trong Angular?

• Template-Driven Forms → được định nghĩa trong các template HTML, dễ dàng cho các form đơn giản.
• Reactive Forms → được định nghĩa trong TypeScript, tốt hơn cho các form động và phức tạp.

Q102. Làm thế nào để tạo một Reactive Form trong Angular?

• Nhập ReactiveFormsModule.
• Sử dụng FormGroup, FormControl, và FormBuilder.

Q103. Làm thế nào để tạo một Template-Driven Form?

• Nhập FormsModule.
• Sử dụng [(ngModel)] cho binding hai chiều và #ref="ngModel".

Q104. Sự khác biệt giữa Template-Driven và Reactive Forms là gì?

• Template-Driven → đơn giản, ít mã, ít khả năng mở rộng.
• Reactive → có cấu trúc, có thể kiểm tra, tốt hơn cho các ứng dụng doanh nghiệp.

Q105. FormGroup trong Angular là gì?

• Một tập hợp các đối tượng FormControl đại diện cho một phần của form.

Q106. FormControl trong Angular là gì?

• Đại diện cho một trường form đơn lẻ và giá trị/trạng thái của nó.

Q107. FormBuilder là gì và tại sao nên sử dụng nó?

• Dịch vụ tiện ích giúp đơn giản hóa việc tạo form.
• Ví dụ:
  typescript Copy

  this.form = this.fb.group({ name: [''], email: [''] });

Q108. Làm thế nào để đặt giá trị khởi tạo trong Reactive Forms?

• Truyền giá trị mặc định vào FormControl hoặc FormGroup.

Q109. Làm thế nào để reset một form trong Angular?

• Sử dụng this.form.reset() cho Reactive Forms.
• Sử dụng form.resetForm() cho Template-Driven Forms.

Q110. Làm thế nào để cập nhật giá trị chương trình trong Reactive Forms?

• Sử dụng setValue() (tất cả các trường đều bắt buộc).
• Sử dụng patchValue() (cập nhật một phần).

Q111. Sự khác nhau giữa validation đồng bộ và không đồng bộ là gì?

• Đồng bộ → chạy ngay lập tức (Validators.required).
• Không đồng bộ → chạy với các kiểm tra từ backend (AsyncValidatorFn).

Q112. Làm thế nào để áp dụng các bộ validator tích hợp trong Reactive Forms?

new FormControl('', [Validators.required, Validators.email]);

Q113. Làm thế nào để tạo một validator tùy chỉnh?

function noSpaces(control: FormControl) {
  return control.value.includes(' ') ? { noSpaces: true } : null;
}

Q114. Làm thế nào để tạo một async validator?

• Trả về Observable<ValidationErrors | null>.
• Ví dụ: kiểm tra xem tên người dùng có tồn tại thông qua HTTP.

Q115. FormArray trong Angular là gì?

• Một tập hợp các điều khiển form cho các form động (ví dụ: nhiều địa chỉ).

Q116. Làm thế nào để vô hiệu hóa/có hiệu lực một điều khiển form một cách động?

control.disable();
control.enable();

Q117. updateOn: 'blur' trong Angular forms là gì?

• Cập nhật validation chỉ khi sự kiện blur thay vì trên mỗi lần gõ.

Q118. Làm thế nào để hiển thị lỗi validation trong Angular forms?

<div *ngIf="control.errors?.required">Trường này là bắt buộc</div>

Q119. Làm thế nào để kiểm tra xem một form có hợp lệ hay không?

• form.valid → trả về true/false.

Q120. Làm thế nào để đánh dấu một điều khiển form là đã được truy cập?

• control.markAsTouched().

Q121. Làm thế nào để xử lý việc gửi form trong Angular?

• Template-Driven → (ngSubmit)="onSubmit()".
• Reactive → this.form.value.

Q122. Làm thế nào để thêm/xóa điều khiển trong một FormArray một cách động?

• this.formArray.push(new FormControl()).
• this.formArray.removeAt(index).

Q123. Sự khác biệt giữa các trạng thái dirty, touched, và pristine là gì?

• dirty → giá trị đã thay đổi.
• touched → trường đã được truy cập.
• pristine → chưa được truy cập và không thay đổi.

Q124. Làm thế nào để tạo validation chéo (ví dụ: xác nhận mật khẩu)?

• Áp dụng validator tùy chỉnh trên FormGroup.

Q125. Làm thế nào để sử dụng async pipe với forms?

• Kết hợp với observables để tự động điền hoặc xác thực động.

Routing & Guards (Q126–Q150)

Q126. Angular Router là gì?

• Quản lý điều hướng giữa các view.

Q127. Làm thế nào để cấu hình routes trong Angular?

const routes: Routes = [
  { path: 'home', component: HomeComponent }
];

Q128. Sự khác biệt giữa forRoot() và forChild() trong routing là gì?

• forRoot() → sử dụng trong AppRoutingModule.
• forChild() → sử dụng trong các module tính năng.

Q129. Lazy loading trong Angular là gì?

• Tải các module chỉ khi cần thiết bằng cách sử dụng loadChildren.

Q130. Preloading trong Angular là gì?

• Tải các module lazy trong nền để điều hướng nhanh hơn.

Q131. Route Guards trong Angular là gì?

• Các dịch vụ quyết định liệu việc điều hướng có được cho phép hay không.

Q132. Các loại Route Guards?

• CanActivate, CanDeactivate, Resolve, CanLoad, CanMatch.

Q133. CanActivate guard là gì?

• Kiểm soát quyền truy cập trước khi kích hoạt một route.

Q134. CanDeactivate guard là gì?

• Ngăn chặn việc rời khỏi một route (ví dụ: thay đổi chưa được lưu).

Q135. Resolve guard là gì?

• Lấy dữ liệu trước khi kích hoạt một route.

Q136. CanLoad guard là gì?

• Ngăn chặn việc tải module trừ khi điều kiện được đáp ứng.

Q137. CanMatch guard là gì?

• Kiểm soát xem một route có thể được khớp hay không.

Q138. Làm thế nào để truyền tham số trong routes?

• path: 'user/:id' → truy cập bằng ActivatedRoute.

Q139. Sự khác biệt giữa query params và route params là gì?

• Route params → một phần của URL (/user/1).
• Query params → sau dấu ? (/user?id=1).

Q140. Làm thế nào để điều hướng chương trình trong Angular?

this.router.navigate(['/home']);

Q141. ActivatedRoute trong Angular là gì?

• Cung cấp quyền truy cập vào route params, query params và dữ liệu.

Q142. Làm thế nào để xử lý route params với observables?

this.route.params.subscribe(params => console.log(params['id']));

Q143. Chiến lược tái sử dụng route trong Angular là gì?

• Lưu cache và tái sử dụng các route để cải thiện hiệu suất.

Q144. Làm thế nào để tạo child routes trong Angular?

{ path: 'parent', component: ParentComponent,
  children: [{ path: 'child', component: ChildComponent }] }

Q145. Sự khác biệt giữa routerLink và href là gì?

• routerLink → điều hướng Angular Router.
• href → tải lại toàn bộ trang.

Q146. routerLinkActive được sử dụng để làm gì?

• Thêm một lớp CSS khi route đang hoạt động.

Q147. Làm thế nào để triển khai hoạt ảnh route?

• Sử dụng API Hoạt ảnh Angular với router-outlet.

Q148. Làm thế nào để xử lý các route 404 trong Angular?

{ path: '**', component: PageNotFoundComponent }

Q149. Làm thế nào để thực hiện chuyển hướng route trong Angular?

{ path: '', redirectTo: '/home', pathMatch: 'full' }

Q150. Làm thế nào để preload các module cụ thể chỉ?

• Tạo một PreloadingStrategy tùy chỉnh.

Thực Hành Tốt Nhất

• Luôn sử dụng Reactive Forms cho các ứng dụng phức tạp để dễ dàng kiểm tra và bảo trì.
• Phân tách logic validation ra khỏi component để tăng tính tái sử dụng.

Cạm Bẫy Thường Gặp

• Nhầm lẫn giữa Template-Driven và Reactive Forms, dẫn đến việc sử dụng không hiệu quả.
• Không sử dụng các validator hiệu quả, dẫn đến trải nghiệm người dùng kém.

Mẹo Hiệu Suất

• Sử dụng lazy loading cho các module lớn để cải thiện thời gian tải trang.
• Áp dụng preloading cho các route thường xuyên được truy cập.

Khắc Phục Sự Cố

• Nếu form không cập nhật đúng giá trị, kiểm tra xem có sử dụng setValue() hay patchValue() đúng cách không.
• Kiểm tra các route guards nếu không thể điều hướng đến một route cụ thể.

Kết Luận

Đây là Phần 3 của Câu Hỏi Phỏng Vấn Angular 20 (Bản 2025). Chúng ta đã khám phá:

• Forms & Validation (Q101–Q125)
• Routing & Guards (Q126–Q150)

Hy vọng bài viết này giúp bạn chuẩn bị tốt hơn cho các cuộc phỏng vấn và nâng cao kỹ năng phát triển Angular của mình! Hãy bắt đầu thực hành ngay hôm nay để nắm vững kiến thức!