Web-Development/Week-04/Day_04

Angular Forms

Overview

Angular Forms are used to capture user input and validate data in web applications.

Angular provides two types of forms:

• Template-driven forms
• Reactive forms

---

Template-Driven Forms

Template-driven forms rely mainly on HTML templates and Angular directives.

Example:

Submit

Features:

• Easy to use
• Suitable for simple forms
• Uses ngModel directive

---

Reactive Forms

Reactive forms are defined in TypeScript using FormControl and FormGroup.

Example:

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

profileForm = new FormGroup({ name: new FormControl(''), email: new FormControl('') });

HTML:

Features:

• More control
• Better for complex forms
• Easy validation and testing

---

Form Validation

Angular provides built-in validation such as:

• required
• minlength
• maxlength
• pattern

Example:

---