Angular Forms — Interview Quick Revision

Group 11: Angular Forms — Interview Quick Revision

1. What are Angular forms?

Angular Forms are used to collect, validate, and process user input. Angular supports Template-Driven Forms, Reactive Forms, and newer Signal Forms.

2. What are Template-Driven Forms?

Template-Driven Forms use HTML templates and ngModel to manage form data and validation. They are suitable for simple forms with minimal logic.

<input [(ngModel)]="username" name="username">

3. What are Reactive Forms?

Reactive Forms manage form controls, values, and validation programmatically using TypeScript. They are suitable for complex and dynamic forms.

name = new FormControl('');

4. Template-Driven vs Reactive Forms — what is the difference?

5. What is FormsModule?

FormsModule provides directives for Template-Driven Forms, including ngModel and ngForm. It enables two-way data binding and form validation.

imports: [FormsModule]

6. What is ReactiveFormsModule?

ReactiveFormsModule provides directives for Reactive Forms, including formGroup, formControl, and formControlName.

imports: [ReactiveFormsModule]

7. How were form modules imported using AppModule?

In traditional NgModule-based Angular applications, FormsModule and ReactiveFormsModule were imported into the imports array of AppModule.

@NgModule({ imports: [BrowserModule, FormsModule, ReactiveFormsModule] })
export class AppModule {}

8. How are form dependencies imported into standalone components?

In modern Angular, form modules are imported directly into the standalone component's imports array, without requiring AppModule.

@Component({ standalone: true, imports: [ReactiveFormsModule], templateUrl: './login.html' })
export class Login {}

9. What is FormControl?

FormControl represents a single input field and manages its value, validation status, and state such as dirty and touched.

email = new FormControl('', Validators.required);

10. What is FormGroup?

FormGroup groups multiple FormControl instances into a single form model and tracks their combined values and validation status.

form = new FormGroup({ name: new FormControl(''), age: new FormControl(0) });

11. What is FormArray?

FormArray manages a dynamic collection of form controls. It is useful when users can add or remove fields, such as phone numbers or addresses.

phones = new FormArray([new FormControl('')]);

12. What is FormBuilder?

FormBuilder is an Angular service that simplifies creating FormGroup, FormControl, and FormArray instances with less code.

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

13. What is NonNullableFormBuilder?

NonNullableFormBuilder creates form controls with non-nullable values, preventing null from being part of their inferred value types.

form = this.fb.nonNullable.group({ name: '' });

14. How do you perform form validation?

Angular supports built-in, custom, synchronous, and asynchronous validators. Validation rules are attached to controls, and errors are checked before submission.

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

15. What are built-in validators?

Angular provides validators such as required, email, min, max, minLength, maxLength, and pattern to validate user input.

password = new FormControl('', [Validators.required, Validators.minLength(8)]);

16. How do you create a custom validator?

A custom validator is a function that checks specific business rules and returns ValidationErrors when invalid or null when valid.

const noAdmin: ValidatorFn = c => c.value === 'admin' ? { restricted: true } : null;

17. What is cross-field validation?

Cross-field validation checks multiple fields together, such as matching password and confirm-password fields. The validator is usually applied to a FormGroup.

const match: ValidatorFn = g => g.get('password')?.value === g.get('confirm')?.value ? null : { mismatch: true };

18. How do you display validation messages?

Use control properties such as invalid, touched, dirty, and hasError() to display messages when validation fails.

@if (email.hasError('required') && email.touched) {
  <span>Email is required</span>
}

19. How do you dynamically add controls?

Use addControl() to add new controls to a FormGroup dynamically at runtime. Use removeControl() to remove them.

form.addControl('phone', new FormControl(''));

20. How do you dynamically add rows using FormArray?

Use FormArray.push() to add rows and removeAt() to remove rows. This is useful for dynamic tables, multiple addresses, or employee details.

employees.push(this.fb.group({ name: [''], salary: [0] }));
employees.removeAt(0);

21. What are typed reactive forms?

Typed Reactive Forms provide TypeScript type checking for form controls and values. They help prevent type-related errors during development.

name = new FormControl<string>('', { nonNullable: true });

Important Interview Revision Points

Interview priority: Focus particularly on questions 4, 8, 9, 10, 11, 12, 14, 16, 17, 20, and 21. These cover the most important concepts for Angular Reactive Forms interviews.