5 questions foundWhat is the difference between template driven forms and reactive forms in Angular?
Beginner Template driven forms build the form structure mostly in the HTML template, using ngModel for two way binding and letting Angular create the form control objects behind the scenes automatically. Reactive forms build the form structure explicitly in the TypeScript class using FormGroup and FormControl objects, giving you more direct control and making complex validation and dynamic forms easier to manage.
// Template driven
<input name="email" ngModel required />
// Reactive
form = new FormGroup({
email: new FormControl('', Validators.required)
});
<input [formControl]="form.controls.email" />
Real-world example A simple contact form with just a couple of fields uses the template driven approach for quick setup, while a complex multi step signup form uses reactive forms for its more predictable, explicit control over validation.
Common follow-ups: Which approach does the Angular team generally recommend for larger, more complex forms?;Can you mix template driven and reactive forms in the same app?
Data Binding;Angular Style Guide & Best Practices
How do you add validation to a reactive form field, and how do you show an error message to the user?
Intermediate You pass one or more validator functions, like Validators.required, when creating a FormControl, and check the control's valid and touched properties in your template to decide whether to show a specific error message.
form = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email])
});
<input [formControl]="form.controls.email" />
@if (form.controls.email.invalid && form.controls.email.touched) {
<p>Please enter a valid email address</p>
}
Real-world example A signup form shows a clear error message right below the email field the moment a user tabs away from an invalid entry, using Angular's built in validators combined with the control's touched and invalid state.
Common follow-ups: What is the difference between the touched and dirty properties on a form control?;How would you create your own custom validator function for a rule Angular does not provide built in?
Angular Security (XSS Sanitization & CSP);Data Binding
How would you build a dynamic form with a variable number of fields, such as a list of phone numbers, using reactive forms?
Intermediate You use a FormArray, which holds a dynamic list of form controls, letting you add or remove entries at runtime, such as letting a user add as many phone numbers as they need, while Angular keeps track of the validity of the entire array of fields.
form = new FormGroup({
phoneNumbers: new FormArray([new FormControl('')])
});
addPhoneNumber() {
(this.form.get('phoneNumbers') as FormArray).push(new FormControl(''));
}
Real-world example A job application form lets a user add multiple previous employers dynamically, using a FormArray to manage however many entries the user decides to add, without needing to predefine a fixed maximum number of fields.
Common follow-ups: How do you remove a specific entry from a FormArray at runtime?;How would you validate that a FormArray has at least one entry filled in?
State Management;Angular Style Guide & Best Practices
How would you create a custom asynchronous validator that checks something against a server, such as whether a username is already taken?
Advanced An asynchronous validator function returns an observable or a promise instead of a plain value, letting you perform something like an API call to check availability, with Angular automatically marking the control as pending while waiting and updating its validity once the response arrives.
function uniqueUsernameValidator(userService: UserService): AsyncValidatorFn {
return (control: AbstractControl) => {
return userService.checkUsernameAvailable(control.value).pipe(
map((isAvailable) => (isAvailable ? null : { usernameTaken: true }))
);
};
}
Real-world example A signup form checks in real time whether a chosen username is already taken by calling the server through an asynchronous validator, showing a pending indicator while waiting and an error message if the username turns out to be unavailable.
Common follow-ups: How do you avoid sending a request on every single keystroke while the user is still typing the username?;What does the pending status on a form control actually represent?
RxJS & Observables;HTTP Client & Interceptors
How do you prevent a form from reloading the page when it is submitted in Angular?
Beginner You bind to the form's ngSubmit event instead of the native submit event, and Angular automatically prevents the default page reload behavior for you, letting your component's own method handle the submission logic instead.
<form (ngSubmit)="onSubmit()">
<input name="email" ngModel />
<button type="submit">Submit</button>
</form>
onSubmit() {
console.log('Form submitted without reloading the page');
}
Real-world example A contact form smoothly shows a thank you message after submission, without the jarring full page reload that would normally happen, thanks to Angular's ngSubmit event handling this automatically.
Common follow-ups: What happens if you accidentally bind to the native submit event instead of ngSubmit?;Is there a difference in behavior between a button with type submit and one with type button inside a form?
Data Binding;Components & Templates