DEV Community

Parth Raval
Parth Raval

Posted on

Angular 20 Interview Questions and Answers (2025) – Part 3: Forms, Validation & Routing

#angular #forms #validation #routing

angular-20-interview-questions-and-answers-2025–Part3:Forms-Validation&Routing

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, and FormBuilder.

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 FormControl objects 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: [''] });
Enter fullscreen mode Exit fullscreen mode

Q108. How do you set initial values in Reactive Forms?

  • Pass default values into FormControl or FormGroup.

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]);
Enter fullscreen mode Exit fullscreen mode

Q113. How do you create a custom validator?

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

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();
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Q119. How do you check if a form is valid or invalid?

  • form.valid → returns true/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 }
];
Enter fullscreen mode Exit fullscreen mode

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 using ActivatedRoute.

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']);
Enter fullscreen mode Exit fullscreen mode

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']));
Enter fullscreen mode Exit fullscreen mode

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 }] }
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

Q149. How do you perform route redirection in Angular?

{ path: '', redirectTo: '/home', pathMatch: 'full' }
Enter fullscreen mode Exit fullscreen mode

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)

Top comments (0)