#6 Session 5: Reactive Form Basics

 Here are the lecture notes for Session 5: Forms & Validation (2 hours) with a step-by-step hands-on guide.

---

Session 5: Reactive Form

Learning Objectives

✅ Understand the difference between Template-Driven Forms and Reactive Forms
✅ Learn how to create Angular Forms with validation
✅ Implement custom validation and error handling
✅ Hands-on practice with forms using Reactive Forms and Template-Driven Forms

---

1. Introduction to Angular Forms (15 mins)

What are Angular Forms?

Forms in Angular allow users to input data. There are two approaches:

Type	Features
Template-Driven Forms	Simple, uses HTML and Angular directives like ngModel
Reactive Forms	More powerful, programmatic form control with FormGroup and FormControl

Why Use Forms?

✔ Collect and process user data
✔ Validate input before submission
✔ Handle errors and display messages

---

When to Use Reactive Forms?

Answer: When things get complex! But hey, let’s start simple so our brains don’t explode. 🚀

---

Step 1: Create a New Angular Project

ng new form1
cd form1
code .

---

Step 2: Building a Simple Form (Baby Steps 👶)

Modify app.component.html to create a basic form:

<h1>Basic React Form</h1>
<input type="text" placeholder="Enter your name"><br>
<input type="text" placeholder="Enter your password"><br>
<input type="text" placeholder="Enter your email"><br>
<button>Add Info</button>

🚀 Looks simple, right? But let’s make it smarter!

---

Step 3: Making It Reactive 💪

Modify app.component.ts:

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [ReactiveFormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  name = new FormControl();
  password = new FormControl();
  email = new FormControl();
  mobile = new FormControl();
}

Modify app.component.html to bind the inputs:

<h1>Basic React Form</h1>
<input type="text" placeholder="Enter your name" [formControl]="name"><br><br>
<input type="text" placeholder="Enter your password" [formControl]="password"><br><br>
<input type="text" placeholder="Enter your email" [formControl]="email"><br><br>
<input type="text" placeholder="Enter your Mobile" [formControl]="mobile"><br><br>
<button>Add Info</button>

<br>
Values Entered:
<br>
{{name.value}}<br>
{{password.value}}<br>
{{email.value}}<br>
{{mobile.value}}<br>

Now, when you type something, it updates automatically! Cool, right? 😎

Run the project:

ng serve

Check it out in the browser!

---

Step 4: Get Values from the Form 🕵️‍♂️

Modify app.component.ts:

export class AppComponent {
  name = new FormControl();
  password = new FormControl();
  email = new FormControl();
  mobile = new FormControl();

  getValue() {
    console.log(this.name.value);
    console.log(this.password.value);
    console.log(this.email.value);
    console.log(this.mobile.value);
  }
}

Modify app.component.html to add a button:

<button (click)="getValue()">Get Info</button>

Now when you click the button, check the console. It prints what you typed! 🖨️

---

Step 5: Set Values in the Form (Magic Trick 🎩🐰)

Modify app.component.ts:

setValue() {
  this.name.setValue("rmc");
  this.password.setValue("immbiz");
  this.email.setValue("a@a.com");
  this.mobile.setValue("1234567890");
}

Modify app.component.html:

<button (click)="setValue()">Set Info</button>

🔄 Click the button, and BOOM! The fields are auto-filled.

---

Step 6: Set Default Values (Because We’re Lazy 🤷‍♂️)

Modify app.component.ts:

export class AppComponent {
  name = new FormControl('RMC');
  password = new FormControl('ABCDEFGHIJ');
  email = new FormControl('a@a.com');
  mobile = new FormControl('09080750000');
}

Now, when the page loads, the fields already have values. Nice, right? 😉

---

🚀 Summary

• We started with a simple form.
• We made it reactive using FormControl.
• We learned to get values and set values dynamically.
• We even added default values (because why type when you don’t have to?).

🎉 Congratulations! You just built your first Angular Reactive Form! Keep experimenting! 💡

😊