This content originally appeared on DEV Community and was authored by Paaarth
In Part 2, we explored RxJS and Change Detection (Q51–Q100).
Now in Part 3 of Angular 20 Interview Questions and Answers (2025 Edition), we’ll dive into:
- Angular Forms & Validation (Q101–Q125)
* Angular Routing & Guards (Q126–Q150)
Forms & Validation (Q101–Q125)
Q101. What are the two types of forms in Angular?
- Template-Driven Forms → defined in HTML templates, easier for simple forms.
- Reactive Forms → defined in TypeScript, better for dynamic and complex forms.
Q102. How do you create a Reactive Form in Angular?
- Import
ReactiveFormsModule. - Use
FormGroup,FormControl, andFormBuilder.
Q103. How do you create a Template-Driven Form?
- Import
FormsModule. - Use
[(ngModel)]for two-way binding and#ref="ngModel".
Q104. What is the difference between Template-Driven and Reactive Forms?
- Template-Driven → simple, less code, less scalable.
- Reactive → structured, testable, better for enterprise apps.
Q105. What is a FormGroup in Angular?
- A collection of
FormControlobjects representing a form section.
Q106. What is a FormControl in Angular?
- Represents a single form field and its value/state.
Q107. What is FormBuilder and why use it?
- Utility service that simplifies creating forms.
- Example:
this.form = this.fb.group({ name: [''], email: [''] });
Q108. How do you set initial values in Reactive Forms?
- Pass default values into
FormControlorFormGroup.
Q109. How do you reset a form in Angular?
-
this.form.reset()for Reactive Forms. -
form.resetForm()for Template-Driven Forms.
Q110. How do you update values programmatically in Reactive Forms?
- Use
setValue()(all fields required). - Use
patchValue()(partial updates).
Q111. What is synchronous vs asynchronous validation?
- Sync → runs instantly (
Validators.required). - Async → runs with backend checks (
AsyncValidatorFn).
Q112. How do you apply built-in validators in Reactive Forms?
new FormControl('', [Validators.required, Validators.email]);
Q113. How do you create a custom validator?
function noSpaces(control: FormControl) {
return control.value.includes(' ') ? { noSpaces: true } : null;
}
Q114. How do you create an async validator?
- Returns
Observable<ValidationErrors | null>. - Example: checking if username exists via HTTP.
Q115. What is a FormArray in Angular?
- A collection of form controls for dynamic forms (e.g., multiple addresses).
Q116. How do you disable/enable a form control dynamically?
control.disable();
control.enable();
Q117. What is updateOn: 'blur' in Angular forms?
- Updates validation only on blur event instead of on every keystroke.
Q118. How do you display validation errors in Angular forms?
<div *ngIf="control.errors?.required">Field is required</div>
Q119. How do you check if a form is valid or invalid?
-
form.valid→ returnstrue/false.
Q120. How do you mark a form control as touched?
-
control.markAsTouched().
Q121. How do you handle form submission in Angular?
- Template-Driven →
(ngSubmit)="onSubmit()". - Reactive →
this.form.value.
Q122. How do you dynamically add/remove controls in a FormArray?
-
this.formArray.push(new FormControl()). -
this.formArray.removeAt(index).
Q123. What is the difference between dirty, touched, and pristine states?
- dirty → value changed.
- touched → field visited.
- pristine → untouched and unchanged.
Q124. How do you create cross-field validation (e.g., confirm password)?
- Apply custom validator on
FormGroup.
Q125. How do you use async pipe with forms?
- Combine with observables to pre-fill or validate dynamically.
Routing & Guards (Q126–Q150)
Q126. What is Angular Router?
- Manages navigation between views.
Q127. How do you configure routes in Angular?
const routes: Routes = [
{ path: 'home', component: HomeComponent }
];
Q128. What is the difference between forRoot() and forChild() in routing?
-
forRoot()→ used in AppRoutingModule. -
forChild()→ used in feature modules.
Q129. What is lazy loading in Angular?
- Loads modules only when needed using
loadChildren.
Q130. What is preloading in Angular?
- Preloads lazy modules in background for faster navigation.
Q131. What are Route Guards in Angular?
- Services that decide whether navigation is allowed.
Q132. Types of Route Guards?
-
CanActivate,CanDeactivate,Resolve,CanLoad,CanMatch.
Q133. What is CanActivate guard?
- Controls access before activating a route.
Q134. What is CanDeactivate guard?
- Prevents leaving a route (e.g., unsaved changes).
Q135. What is a Resolve guard?
- Fetches data before activating a route.
Q136. What is CanLoad guard?
- Prevents module loading unless condition is met.
Q137. What is CanMatch guard?
- Controls if a route can be matched.
Q138. How do you pass parameters in routes?
-
path: 'user/:id'→ accessed usingActivatedRoute.
Q139. Difference between query params and route params?
- Route params → part of URL (
/user/1). - Query params → after
?(/user?id=1).
Q140. How do you navigate programmatically in Angular?
this.router.navigate(['/home']);
Q141. What is ActivatedRoute in Angular?
- Provides access to route params, query params, and data.
Q142. How do you handle route params with observables?
this.route.params.subscribe(params => console.log(params['id']));
Q143. What is route reuse strategy in Angular?
- Caches and reuses routes for performance.
Q144. How do you create child routes in Angular?
{ path: 'parent', component: ParentComponent,
children: [{ path: 'child', component: ChildComponent }] }
Q145. What is the difference between routerLink and href?
-
routerLink→ Angular Router navigation. -
href→ full page reload.
Q146. What is routerLinkActive used for?
- Adds a CSS class when route is active.
Q147. How do you implement route animations?
- Use Angular Animations API with
router-outlet.
Q148. How do you handle 404 routes in Angular?
{ path: '**', component: PageNotFoundComponent }
Q149. How do you perform route redirection in Angular?
{ path: '', redirectTo: '/home', pathMatch: 'full' }
Q150. How do you preload specific modules only?
- Create a custom
PreloadingStrategy.
Conclusion
This was Part 3 of Angular 20 Interview Questions and Answers (2025 Edition).
We covered:
Forms & Validation (Q101–Q125)
Routing & Guards (Q126–Q150)
This content originally appeared on DEV Community and was authored by Paaarth
Paaarth | Sciencx (2025-09-20T01:30:00+00:00) Angular 20 Interview Questions and Answers (2025) – Part 3: Forms, Validation & Routing. Retrieved from https://www.scien.cx/2025/09/20/angular-20-interview-questions-and-answers-2025-part-3-forms-validation-routing/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.