Forms in Angular

# CHAPTER 11

Forms in Angular #

1. Chapter Introduction #

2. Learning Objectives #

• Differentiate between Template-Driven and Reactive Forms.

• Understand the core building blocks: FormControl, FormGroup.

• Apply built-in validators (required, minLength, email).

• Display validation error messages conditionally.

• Know when to use each form type.

3. Two Approaches at a Glance #

4. Core Building Blocks #

#### FormControl Tracks the value and validation state of a single input:

import { FormControl } from '@angular/forms';

const usernameControl = new FormControl('', [Validators.required, Validators.minLength(3)]);

console.log(usernameControl.value);   // ''
console.log(usernameControl.valid);   // false
console.log(usernameControl.errors);  // { required: true }

#### FormGroup Groups multiple FormControl instances together:

import { FormGroup, FormControl, Validators } from '@angular/forms';

const loginForm = new FormGroup({
  email: new FormControl('', [Validators.required, Validators.email]),
  password: new FormControl('', [Validators.required, Validators.minLength(6)])
});

5. Validation States #

• valid / invalid

• touched / untouched (has the user interacted?)

• dirty / pristine (has the value changed?)

6. Built-in Validators #

import { Validators } from '@angular/forms';

// Available validators:
Validators.required
Validators.email
Validators.minLength(5)
Validators.maxLength(100)
Validators.pattern('[0-9]{10}')  // Regex pattern
Validators.min(0)
Validators.max(100)

7. Displaying Validation Errors #

<input formControlName="email" />

<!-- Show error only after user has touched the field -->
<div *ngIf="loginForm.get(&#039;email')?.invalid && loginForm.get('email')?.touched">
  <span *ngIf="loginForm.get(&#039;email')?.errors?.['required']">Email is required.</span>
  <span *ngIf="loginForm.get(&#039;email')?.errors?.['email']">Enter a valid email.</span>
</div>

8. Which Form Type to Choose? #

• Building simple, static forms (login, contact us).

• Rapid prototyping.

• The form structure doesn't change dynamically.

Use Reactive when:

• Complex validation logic.

• Dynamic fields (adding/removing form fields at runtime).

• Unit testing is required.

• Building survey or wizard-style multi-step forms.

9. Common Mistakes #

• Mixing Template-Driven and Reactive: Never use both ngModel and formControlName on the same input. Choose one approach per form.

• Importing wrong module: Template-Driven Forms need FormsModule. Reactive Forms need ReactiveFormsModule. Importing the wrong one causes confusing errors.

10. MCQs with Answers #

11. Interview Questions #

• Q: Compare Template-Driven and Reactive Forms. What are the trade-offs of each?

• Q: How would you implement a custom validator in Angular Reactive Forms?

12. Summary #

13. Next Chapter Recommendation #