🌐 Angular Forms: Reactive and Template Forms

🎯 Introduction

Welcome to the exciting world of Angular forms! 🎉 In this comprehensive guide, we’ll explore both reactive and template-driven forms in Angular with TypeScript.

You’ll discover how Angular’s powerful form system can transform your web application development experience. Whether you’re building registration pages 📝, contact forms 📧, or complex data entry interfaces 🗂️, mastering Angular forms is essential for creating robust, user-friendly applications.

By the end of this tutorial, you’ll feel confident creating both reactive and template-driven forms in your Angular projects! Let’s dive in! 🏊‍♂️

📚 Understanding Angular Forms

🤔 What are Angular Forms?

Angular forms are like digital paperwork systems 📋. Think of them as interactive questionnaires that help you collect, validate, and process user information seamlessly!

In Angular/TypeScript terms, forms provide two distinct approaches:

✨ Template-driven forms: HTML-centric with minimal TypeScript code
🚀 Reactive forms: TypeScript-centric with powerful programmatic control
🛡️ Built-in validation: Automatic error handling and user feedback

💡 Why Use Angular Forms?

Here’s why developers love Angular forms:

Type Safety 🔒: Catch form errors at compile-time with TypeScript
Two-Way Binding 🔄: Automatic synchronization between model and view
Validation System ✅: Built-in and custom validators
Performance ⚡: Efficient change detection and updates

Real-world example: Imagine building a user registration form 👤. With Angular forms, you can validate email formats, ensure password strength, and provide instant feedback—all with type safety!

🔧 Basic Syntax and Usage

📝 Template-Driven Forms

Let’s start with a friendly template-driven example:

// 🎨 user-profile.component.ts
import { Component } from '@angular/core';

interface UserProfile {
  name: string;      // 👤 User's name
  email: string;     // 📧 Email address  
  age: number;       // 🎂 User's age
  hobby?: string;    // 🎯 Optional hobby
}

@Component({
  selector: 'app-user-profile',
  template: `
    <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
      <!-- 👋 Welcome message -->
      <h2>Welcome! Tell us about yourself 🌟</h2>
      
      <!-- 📝 Name input -->
      <div class="form-group">
        <label for="name">Name 👤</label>
        <input 
          type="text" 
          id="name"
          name="name"
          [(ngModel)]="user.name"
          #nameInput="ngModel"
          required
          minlength="2"
          class="form-control">
        
        <!-- ⚠️ Validation messages -->
        <div *ngIf="nameInput.invalid && nameInput.touched" class="error">
          <small *ngIf="nameInput.errors?.['required']">Name is required! 🚨</small>
          <small *ngIf="nameInput.errors?.['minlength']">Name too short! 📏</small>
        </div>
      </div>
      
      <!-- 📧 Email input -->
      <div class="form-group">
        <label for="email">Email 📧</label>
        <input 
          type="email" 
          id="email"
          name="email"
          [(ngModel)]="user.email"
          #emailInput="ngModel"
          required
          email
          class="form-control">
        
        <div *ngIf="emailInput.invalid && emailInput.touched" class="error">
          <small *ngIf="emailInput.errors?.['required']">Email is required! 🚨</small>
          <small *ngIf="emailInput.errors?.['email']">Invalid email format! 📧</small>
        </div>
      </div>
      
      <!-- 🎂 Age input -->
      <div class="form-group">
        <label for="age">Age 🎂</label>
        <input 
          type="number" 
          id="age"
          name="age"
          [(ngModel)]="user.age"
          #ageInput="ngModel"
          required
          min="13"
          max="120"
          class="form-control">
      </div>
      
      <!-- 🚀 Submit button -->
      <button 
        type="submit" 
        [disabled]="userForm.invalid"
        class="btn btn-primary">
        Create Profile 🌟
      </button>
    </form>
    
    <!-- 📊 Form debug info -->
    <div class="debug-info" *ngIf="showDebug">
      <h3>Debug Info 🔍</h3>
      <p>Form Valid: {{ userForm.valid ? '✅' : '❌' }}</p>
      <p>Form Value: {{ userForm.value | json }}</p>
    </div>
  `
})
export class UserProfileComponent {
  // 🎯 Our user model
  user: UserProfile = {
    name: '',
    email: '',
    age: 18
  };
  
  showDebug = true;
  
  // ✨ Handle form submission
  onSubmit(form: any): void {
    if (form.valid) {
      console.log('🎉 Profile created successfully!', this.user);
      console.log('Form submitted with emoji power! 🚀');
    }
  }
}

💡 Explanation: Template-driven forms use directives like ngModel for two-way binding and ngForm for form management. Notice how we use emojis to make the interface friendly!

🎯 Reactive Forms

Here’s the same form using the reactive approach:

// 🚀 reactive-user-profile.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-reactive-user-profile',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <h2>Reactive Profile Form 🚀</h2>
      
      <!-- 👤 Name field -->
      <div class="form-group">
        <label for="name">Name 👤</label>
        <input 
          type="text" 
          id="name"
          formControlName="name"
          class="form-control"
          [class.is-invalid]="isFieldInvalid('name')">
        
        <div *ngIf="isFieldInvalid('name')" class="error">
          <small *ngIf="userForm.get('name')?.errors?.['required']">
            Name is required! 🚨
          </small>
          <small *ngIf="userForm.get('name')?.errors?.['minlength']">
            Name must be at least 2 characters! 📏
          </small>
        </div>
      </div>
      
      <!-- 📧 Email field -->
      <div class="form-group">
        <label for="email">Email 📧</label>
        <input 
          type="email" 
          id="email"
          formControlName="email"
          class="form-control"
          [class.is-invalid]="isFieldInvalid('email')">
        
        <div *ngIf="isFieldInvalid('email')" class="error">
          <small *ngIf="userForm.get('email')?.errors?.['required']">
            Email is required! 🚨
          </small>
          <small *ngIf="userForm.get('email')?.errors?.['email']">
            Please enter a valid email! 📧
          </small>
        </div>
      </div>
      
      <!-- 🎂 Age with custom validator -->
      <div class="form-group">
        <label for="age">Age 🎂</label>
        <input 
          type="number" 
          id="age"
          formControlName="age"
          class="form-control"
          [class.is-invalid]="isFieldInvalid('age')">
        
        <div *ngIf="isFieldInvalid('age')" class="error">
          <small *ngIf="userForm.get('age')?.errors?.['required']">
            Age is required! 🚨
          </small>
          <small *ngIf="userForm.get('age')?.errors?.['ageRange']">
            Age must be between 13 and 120! 🎂
          </small>
        </div>
      </div>
      
      <!-- 🎯 Hobby field (optional) -->
      <div class="form-group">
        <label for="hobby">Favorite Hobby 🎯</label>
        <select formControlName="hobby" class="form-control">
          <option value="">Select a hobby...</option>
          <option value="coding">Coding 👩‍💻</option>
          <option value="gaming">Gaming 🎮</option>
          <option value="reading">Reading 📚</option>
          <option value="sports">Sports ⚽</option>
          <option value="music">Music 🎵</option>
        </select>
      </div>
      
      <!-- 🚀 Submit button -->
      <button 
        type="submit" 
        [disabled]="userForm.invalid"
        class="btn btn-primary">
        Create Awesome Profile 🌟
      </button>
    </form>
    
    <!-- 📊 Real-time form status -->
    <div class="form-status">
      <h3>Form Status 📊</h3>
      <p>Valid: {{ userForm.valid ? '✅' : '❌' }}</p>
      <p>Dirty: {{ userForm.dirty ? '✅' : '❌' }}</p>
      <p>Touched: {{ userForm.touched ? '✅' : '❌' }}</p>
    </div>
  `
})
export class ReactiveUserProfileComponent implements OnInit {
  userForm: FormGroup;
  
  constructor(private formBuilder: FormBuilder) {
    // 🏗️ Initialize form in constructor
    this.userForm = this.formBuilder.group({});
  }
  
  ngOnInit(): void {
    // 🎨 Build the form structure
    this.userForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, this.ageRangeValidator]],
      hobby: [''] // Optional field
    });
    
    // 👀 Listen to form changes
    this.userForm.valueChanges.subscribe(value => {
      console.log('🔄 Form value changed:', value);
    });
  }
  
  // 🎯 Custom age validator
  ageRangeValidator(control: AbstractControl): {[key: string]: any} | null {
    const age = control.value;
    if (age !== null && (isNaN(age) || age < 13 || age > 120)) {
      return { 'ageRange': { value: control.value } };
    }
    return null;
  }
  
  // 🔍 Helper method to check field validity
  isFieldInvalid(fieldName: string): boolean {
    const field = this.userForm.get(fieldName);
    return !!(field && field.invalid && (field.dirty || field.touched));
  }
  
  // ✨ Handle form submission
  onSubmit(): void {
    if (this.userForm.valid) {
      const formValue = this.userForm.value;
      console.log('🎉 Reactive form submitted successfully!', formValue);
      
      // 🚀 Process the form data
      this.processUserProfile(formValue);
    } else {
      console.log('❌ Form is invalid');
      this.markFormGroupTouched();
    }
  }
  
  // 🏗️ Process the user profile
  private processUserProfile(userData: UserProfile): void {
    console.log('Processing user profile:', userData);
    // Add your processing logic here
  }
  
  // 👆 Mark all fields as touched to show validation errors
  private markFormGroupTouched(): void {
    Object.keys(this.userForm.controls).forEach(key => {
      this.userForm.get(key)?.markAsTouched();
    });
  }
}

💡 Practical Examples

🛒 Example 1: E-commerce Product Review Form

Let’s build a product review form for an online store:

// 🛍️ Product review form
interface ProductReview {
  productId: string;
  rating: number;
  title: string;
  comment: string;
  recommend: boolean;
  reviewerName?: string;
}

@Component({
  selector: 'app-product-review',
  template: `
    <div class="review-form-container">
      <h2>Share Your Experience! 🌟</h2>
      
      <form [formGroup]="reviewForm" (ngSubmit)="submitReview()">
        <!-- ⭐ Rating stars -->
        <div class="rating-section">
          <label>Overall Rating ⭐</label>
          <div class="star-rating">
            <button 
              type="button"
              *ngFor="let star of [1,2,3,4,5]; let i = index"
              class="star-btn"
              [class.active]="star <= (reviewForm.get('rating')?.value || 0)"
              (click)="setRating(star)">
              {{ star <= (reviewForm.get('rating')?.value || 0) ? '⭐' : '☆' }}
            </button>
          </div>
          <small *ngIf="isFieldInvalid('rating')" class="error">
            Please select a rating! 🌟
          </small>
        </div>
        
        <!-- 📝 Review title -->
        <div class="form-group">
          <label for="title">Review Title 📝</label>
          <input 
            type="text" 
            id="title"
            formControlName="title"
            placeholder="Summarize your experience..."
            class="form-control">
          
          <div *ngIf="isFieldInvalid('title')" class="error">
            <small>Please provide a title for your review! 📝</small>
          </div>
        </div>
        
        <!-- 💬 Detailed comment -->
        <div class="form-group">
          <label for="comment">Your Review 💬</label>
          <textarea 
            id="comment"
            formControlName="comment"
            rows="4"
            placeholder="Tell us about your experience with this product..."
            class="form-control">
          </textarea>
          
          <div class="character-count">
            {{ reviewForm.get('comment')?.value?.length || 0 }}/500 characters
          </div>
          
          <div *ngIf="isFieldInvalid('comment')" class="error">
            <small *ngIf="reviewForm.get('comment')?.errors?.['required']">
              Please share your thoughts! 💭
            </small>
            <small *ngIf="reviewForm.get('comment')?.errors?.['maxlength']">
              Review is too long! Keep it under 500 characters 📏
            </small>
          </div>
        </div>
        
        <!-- 👍 Recommendation -->
        <div class="form-group">
          <label class="checkbox-label">
            <input 
              type="checkbox" 
              formControlName="recommend">
            Would you recommend this product? 👍
          </label>
        </div>
        
        <!-- 👤 Optional reviewer name -->
        <div class="form-group">
          <label for="reviewerName">Your Name (Optional) 👤</label>
          <input 
            type="text" 
            id="reviewerName"
            formControlName="reviewerName"
            placeholder="Anonymous"
            class="form-control">
        </div>
        
        <!-- 🚀 Submit button -->
        <button 
          type="submit" 
          [disabled]="reviewForm.invalid"
          class="btn btn-primary">
          {{ reviewForm.invalid ? 'Complete Your Review 📝' : 'Submit Review 🚀' }}
        </button>
      </form>
      
      <!-- 📊 Review preview -->
      <div *ngIf="reviewForm.valid" class="review-preview">
        <h3>Preview Your Review 👁️</h3>
        <div class="preview-content">
          <div class="preview-rating">
            <span *ngFor="let star of [1,2,3,4,5]">
              {{ star <= reviewForm.get('rating')?.value ? '⭐' : '☆' }}
            </span>
          </div>
          <h4>{{ reviewForm.get('title')?.value }}</h4>
          <p>{{ reviewForm.get('comment')?.value }}</p>
          <small>
            By {{ reviewForm.get('reviewerName')?.value || 'Anonymous' }}
            {{ reviewForm.get('recommend')?.value ? '• Recommends this product 👍' : '' }}
          </small>
        </div>
      </div>
    </div>
  `
})
export class ProductReviewComponent implements OnInit {
  reviewForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.reviewForm = this.fb.group({});
  }
  
  ngOnInit(): void {
    // 🏗️ Build the review form
    this.reviewForm = this.fb.group({
      productId: ['PROD_123'], // Hidden field
      rating: [0, [Validators.required, Validators.min(1)]],
      title: ['', [Validators.required, Validators.minLength(5)]],
      comment: ['', [Validators.required, Validators.maxLength(500)]],
      recommend: [false],
      reviewerName: [''] // Optional
    });
  }
  
  // ⭐ Set star rating
  setRating(rating: number): void {
    this.reviewForm.patchValue({ rating });
  }
  
  // 🔍 Check if field is invalid and touched
  isFieldInvalid(fieldName: string): boolean {
    const field = this.reviewForm.get(fieldName);
    return !!(field && field.invalid && (field.dirty || field.touched));
  }
  
  // 🚀 Submit the review
  submitReview(): void {
    if (this.reviewForm.valid) {
      const review: ProductReview = this.reviewForm.value;
      console.log('🎉 Review submitted successfully!', review);
      
      // 📤 Send to backend
      this.saveReview(review);
    }
  }
  
  // 💾 Save review to backend
  private saveReview(review: ProductReview): void {
    // Simulate API call
    console.log('📤 Saving review to backend...', review);
    
    // Show success message
    setTimeout(() => {
      console.log('✅ Review saved successfully! Thank you! 🙏');
      this.resetForm();
    }, 1000);
  }
  
  // 🔄 Reset form after submission
  private resetForm(): void {
    this.reviewForm.reset();
    this.reviewForm.patchValue({
      productId: 'PROD_123',
      rating: 0,
      recommend: false
    });
  }
}

🎯 Try it yourself: Add a file upload field for product photos and implement image preview functionality!

🎮 Example 2: Gaming Tournament Registration

Let’s create a fun tournament registration form:

// 🏆 Tournament registration system
interface TournamentPlayer {
  gamertag: string;
  email: string;
  favoriteGame: string;
  skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  teamName?: string;
  discordHandle?: string;
  age: number;
  acceptTerms: boolean;
}

@Component({
  selector: 'app-tournament-registration',
  template: `
    <div class="tournament-form">
      <h1>🏆 Epic Gaming Tournament Registration</h1>
      <p>Join the ultimate gaming competition! 🎮</p>
      
      <form [formGroup]="playerForm" (ngSubmit)="registerPlayer()">
        <!-- 🎮 Gamer tag -->
        <div class="form-group">
          <label for="gamertag">Gamertag 🎮</label>
          <input 
            type="text" 
            id="gamertag"
            formControlName="gamertag"
            placeholder="Enter your epic gamertag"
            class="form-control">
          
          <div *ngIf="isFieldInvalid('gamertag')" class="error">
            <small>Your gamertag is required! 🎮</small>
          </div>
        </div>
        
        <!-- 📧 Email -->
        <div class="form-group">
          <label for="email">Email 📧</label>
          <input 
            type="email" 
            id="email"
            formControlName="email"
            placeholder="[email protected]"
            class="form-control">
        </div>
        
        <!-- 🎯 Favorite game -->
        <div class="form-group">
          <label for="favoriteGame">Favorite Game 🎯</label>
          <select id="favoriteGame" formControlName="favoriteGame" class="form-control">
            <option value="">Choose your weapon...</option>
            <option value="valorant">Valorant 🔫</option>
            <option value="lol">League of Legends ⚔️</option>
            <option value="fortnite">Fortnite 🏗️</option>
            <option value="cs2">Counter-Strike 2 💥</option>
            <option value="rocket-league">Rocket League ⚽</option>
            <option value="overwatch">Overwatch 2 🦸</option>
          </select>
        </div>
        
        <!-- 🏅 Skill level with radio buttons -->
        <div class="form-group">
          <label>Skill Level 🏅</label>
          <div class="radio-group">
            <label class="radio-option">
              <input type="radio" formControlName="skillLevel" value="beginner">
              <span>🌱 Beginner - Just started my journey</span>
            </label>
            <label class="radio-option">
              <input type="radio" formControlName="skillLevel" value="intermediate">
              <span>⚡ Intermediate - Getting the hang of it</span>
            </label>
            <label class="radio-option">
              <input type="radio" formControlName="skillLevel" value="advanced">
              <span>🔥 Advanced - Serious gamer mode</span>
            </label>
            <label class="radio-option">
              <input type="radio" formControlName="skillLevel" value="pro">
              <span>👑 Pro - I live and breathe gaming</span>
            </label>
          </div>
        </div>
        
        <!-- 👥 Team name (optional) -->
        <div class="form-group">
          <label for="teamName">Team Name (Optional) 👥</label>
          <input 
            type="text" 
            id="teamName"
            formControlName="teamName"
            placeholder="The Code Crushers"
            class="form-control">
        </div>
        
        <!-- 💬 Discord handle -->
        <div class="form-group">
          <label for="discordHandle">Discord Handle 💬</label>
          <input 
            type="text" 
            id="discordHandle"
            formControlName="discordHandle"
            placeholder="epicgamer#1234"
            class="form-control">
        </div>
        
        <!-- 🎂 Age verification -->
        <div class="form-group">
          <label for="age">Age 🎂</label>
          <input 
            type="number" 
            id="age"
            formControlName="age"
            min="13"
            class="form-control">
          
          <div *ngIf="isFieldInvalid('age')" class="error">
            <small>You must be at least 13 years old to participate! 🎂</small>
          </div>
        </div>
        
        <!-- ✅ Terms acceptance -->
        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" formControlName="acceptTerms">
            I accept the tournament rules and terms ✅
          </label>
          
          <div *ngIf="isFieldInvalid('acceptTerms')" class="error">
            <small>You must accept the terms to participate! 📜</small>
          </div>
        </div>
        
        <!-- 🚀 Register button -->
        <button 
          type="submit" 
          [disabled]="playerForm.invalid"
          class="btn btn-success btn-lg">
          🏆 Register for Tournament 
        </button>
      </form>
      
      <!-- 📊 Registration stats -->
      <div class="registration-stats" *ngIf="playerForm.valid">
        <h3>Registration Preview 👁️</h3>
        <div class="player-card">
          <h4>{{ playerForm.get('gamertag')?.value }} 🎮</h4>
          <p>
            <strong>Game:</strong> {{ getGameEmoji() }} {{ playerForm.get('favoriteGame')?.value }}
          </p>
          <p>
            <strong>Skill:</strong> {{ getSkillEmoji() }} {{ playerForm.get('skillLevel')?.value }}
          </p>
          <p *ngIf="playerForm.get('teamName')?.value">
            <strong>Team:</strong> 👥 {{ playerForm.get('teamName')?.value }}
          </p>
        </div>
      </div>
    </div>
  `
})
export class TournamentRegistrationComponent implements OnInit {
  playerForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.playerForm = this.fb.group({});
  }
  
  ngOnInit(): void {
    // 🏗️ Build tournament registration form
    this.playerForm = this.fb.group({
      gamertag: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      favoriteGame: ['', Validators.required],
      skillLevel: ['', Validators.required],
      teamName: [''],
      discordHandle: [''],
      age: ['', [Validators.required, Validators.min(13)]],
      acceptTerms: [false, Validators.requiredTrue]
    });
  }
  
  // 🔍 Check field validity
  isFieldInvalid(fieldName: string): boolean {
    const field = this.playerForm.get(fieldName);
    return !!(field && field.invalid && (field.dirty || field.touched));
  }
  
  // 🎮 Get game emoji
  getGameEmoji(): string {
    const game = this.playerForm.get('favoriteGame')?.value;
    const gameEmojis: {[key: string]: string} = {
      'valorant': '🔫',
      'lol': '⚔️',
      'fortnite': '🏗️',
      'cs2': '💥',
      'rocket-league': '⚽',
      'overwatch': '🦸'
    };
    return gameEmojis[game] || '🎮';
  }
  
  // 🏅 Get skill level emoji
  getSkillEmoji(): string {
    const skill = this.playerForm.get('skillLevel')?.value;
    const skillEmojis: {[key: string]: string} = {
      'beginner': '🌱',
      'intermediate': '⚡',
      'advanced': '🔥',
      'pro': '👑'
    };
    return skillEmojis[skill] || '🎮';
  }
  
  // 🏆 Register player for tournament
  registerPlayer(): void {
    if (this.playerForm.valid) {
      const player: TournamentPlayer = this.playerForm.value;
      console.log('🎉 Player registered successfully!', player);
      
      // 🚀 Submit registration
      this.submitRegistration(player);
    }
  }
  
  // 📤 Submit to tournament system
  private submitRegistration(player: TournamentPlayer): void {
    console.log('📤 Submitting tournament registration...', player);
    
    // Simulate API call
    setTimeout(() => {
      console.log('✅ Registration successful! Welcome to the tournament! 🏆');
      this.showSuccessMessage(player);
    }, 1500);
  }
  
  // 🎉 Show success message
  private showSuccessMessage(player: TournamentPlayer): void {
    console.log(`🏆 Welcome ${player.gamertag}! Your tournament registration is complete!`);
    console.log(`📧 Check ${player.email} for tournament details!`);
    console.log('🎮 Get ready to dominate! Good luck! 💪');
  }
}

🚀 Advanced Concepts

🧙‍♂️ Dynamic Form Arrays

When you’re ready to level up, try dynamic form arrays for repeating sections:

// 🎯 Dynamic skills form
interface Skill {
  name: string;
  level: number;
  yearsOfExperience: number;
}

@Component({
  selector: 'app-dynamic-skills',
  template: `
    <form [formGroup]="skillsForm" (ngSubmit)="saveSkills()">
      <h2>Your Skills Portfolio 🎯</h2>
      
      <div formArrayName="skills">
        <div 
          *ngFor="let skillGroup of skillsArray.controls; let i = index"
          [formGroupName]="i"
          class="skill-item">
          
          <h4>Skill #{{ i + 1 }} ⚡</h4>
          
          <div class="skill-fields">
            <input 
              formControlName="name"
              placeholder="Skill name (e.g. TypeScript)"
              class="form-control">
              
            <input 
              type="number"
              formControlName="level"
              placeholder="Level (1-10)"
              min="1" max="10"
              class="form-control">
              
            <input 
              type="number"
              formControlName="yearsOfExperience"
              placeholder="Years of experience"
              min="0"
              class="form-control">
              
            <button 
              type="button"
              (click)="removeSkill(i)"
              class="btn btn-danger">
              Remove 🗑️
            </button>
          </div>
        </div>
      </div>
      
      <div class="form-actions">
        <button 
          type="button"
          (click)="addSkill()"
          class="btn btn-secondary">
          Add Another Skill ➕
        </button>
        
        <button 
          type="submit"
          [disabled]="skillsForm.invalid"
          class="btn btn-primary">
          Save Skills Portfolio 💾
        </button>
      </div>
    </form>
  `
})
export class DynamicSkillsComponent implements OnInit {
  skillsForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.skillsForm = this.fb.group({
      skills: this.fb.array([])
    });
  }
  
  ngOnInit(): void {
    // 🚀 Start with one skill field
    this.addSkill();
  }
  
  // 📋 Get the skills form array
  get skillsArray(): FormArray {
    return this.skillsForm.get('skills') as FormArray;
  }
  
  // ➕ Add a new skill
  addSkill(): void {
    const skillGroup = this.fb.group({
      name: ['', Validators.required],
      level: [1, [Validators.required, Validators.min(1), Validators.max(10)]],
      yearsOfExperience: [0, [Validators.required, Validators.min(0)]]
    });
    
    this.skillsArray.push(skillGroup);
    console.log('➕ Added new skill field!');
  }
  
  // 🗑️ Remove a skill
  removeSkill(index: number): void {
    if (this.skillsArray.length > 1) {
      this.skillsArray.removeAt(index);
      console.log('🗑️ Removed skill at index', index);
    }
  }
  
  // 💾 Save skills
  saveSkills(): void {
    if (this.skillsForm.valid) {
      const skills: Skill[] = this.skillsForm.value.skills;
      console.log('💾 Saving skills portfolio:', skills);
    }
  }
}

🏗️ Custom Form Validators

For the brave developers, create custom validators:

// 🛡️ Custom validators for forms
export class CustomValidators {
  
  // 🎮 Gamertag validator
  static gamertag(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (!value) return null;
    
    // Must be 3-20 characters, alphanumeric with underscores
    const gamertagPattern = /^[a-zA-Z0-9_]{3,20}$/;
    
    if (!gamertagPattern.test(value)) {
      return { 
        gamertag: { 
          message: 'Gamertag must be 3-20 characters (letters, numbers, underscores only) 🎮' 
        } 
      };
    }
    
    return null;
  }
  
  // 🔒 Strong password validator
  static strongPassword(control: AbstractControl): ValidationErrors | null {
    const value = control.value;
    if (!value) return null;
    
    const hasNumber = /[0-9]/.test(value);
    const hasUpper = /[A-Z]/.test(value);
    const hasLower = /[a-z]/.test(value);
    const hasSpecial = /[!@#$%^&*]/.test(value);
    const isLongEnough = value.length >= 8;
    
    const passwordValid = hasNumber && hasUpper && hasLower && hasSpecial && isLongEnough;
    
    if (!passwordValid) {
      return {
        strongPassword: {
          hasNumber,
          hasUpper,
          hasLower,
          hasSpecial,
          isLongEnough,
          message: 'Password must be strong! 🔒'
        }
      };
    }
    
    return null;
  }
  
  // 📧 Email domain validator
  static emailDomain(allowedDomains: string[]) {
    return (control: AbstractControl): ValidationErrors | null => {
      const email = control.value;
      if (!email) return null;
      
      const domain = email.split('@')[1];
      if (domain && !allowedDomains.includes(domain)) {
        return {
          emailDomain: {
            allowedDomains,
            actualDomain: domain,
            message: `Email must be from approved domains: ${allowedDomains.join(', ')} 📧`
          }
        };
      }
      
      return null;
    };
  }
}

// 🎯 Using custom validators
@Component({
  selector: 'app-custom-validation-form',
  template: `
    <form [formGroup]="customForm">
      <!-- 🎮 Gamertag with custom validation -->
      <input 
        formControlName="gamertag"
        placeholder="Enter your gamertag"
        class="form-control">
      
      <div *ngIf="customForm.get('gamertag')?.errors?.['gamertag']" class="error">
        {{ customForm.get('gamertag')?.errors?.['gamertag']?.message }}
      </div>
      
      <!-- 🔒 Password with strength requirements -->
      <input 
        type="password"
        formControlName="password"
        placeholder="Create a strong password"
        class="form-control">
      
      <div *ngIf="customForm.get('password')?.errors?.['strongPassword']" class="error">
        <p>{{ customForm.get('password')?.errors?.['strongPassword']?.message }}</p>
        <ul>
          <li [class.valid]="customForm.get('password')?.errors?.['strongPassword']?.hasNumber">
            Contains number {{ customForm.get('password')?.errors?.['strongPassword']?.hasNumber ? '✅' : '❌' }}
          </li>
          <li [class.valid]="customForm.get('password')?.errors?.['strongPassword']?.hasUpper">
            Contains uppercase {{ customForm.get('password')?.errors?.['strongPassword']?.hasUpper ? '✅' : '❌' }}
          </li>
          <li [class.valid]="customForm.get('password')?.errors?.['strongPassword']?.hasLower">
            Contains lowercase {{ customForm.get('password')?.errors?.['strongPassword']?.hasLower ? '✅' : '❌' }}
          </li>
          <li [class.valid]="customForm.get('password')?.errors?.['strongPassword']?.hasSpecial">
            Contains special char {{ customForm.get('password')?.errors?.['strongPassword']?.hasSpecial ? '✅' : '❌' }}
          </li>
          <li [class.valid]="customForm.get('password')?.errors?.['strongPassword']?.isLongEnough">
            At least 8 characters {{ customForm.get('password')?.errors?.['strongPassword']?.isLongEnough ? '✅' : '❌' }}
          </li>
        </ul>
      </div>
    </form>
  `
})
export class CustomValidationFormComponent implements OnInit {
  customForm: FormGroup;
  
  constructor(private fb: FormBuilder) {
    this.customForm = this.fb.group({});
  }
  
  ngOnInit(): void {
    this.customForm = this.fb.group({
      gamertag: ['', [Validators.required, CustomValidators.gamertag]],
      password: ['', [Validators.required, CustomValidators.strongPassword]],
      email: ['', [
        Validators.required, 
        Validators.email, 
        CustomValidators.emailDomain(['gmail.com', 'company.com'])
      ]]
    });
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting FormsModule Import

// ❌ Wrong way - forms won't work!
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule], // Missing forms modules! 😰
  // ...
})
export class AppModule { }

// ✅ Correct way - import the right modules!
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // 🎉

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,        // 📝 For template-driven forms
    ReactiveFormsModule // 🚀 For reactive forms
  ],
  // ...
})
export class AppModule { }

🤯 Pitfall 2: Form Validation Timing

// ❌ Dangerous - showing errors too early!
@Component({
  template: `
    <input formControlName="email">
    <!-- User sees error immediately on focus! 😱 -->
    <div *ngIf="myForm.get('email')?.invalid">
      Email is required!
    </div>
  `
})
export class BadFormComponent { }

// ✅ Safe - wait for user interaction!
@Component({
  template: `
    <input formControlName="email">
    <!-- Only show after user touches the field ✨ -->
    <div *ngIf="myForm.get('email')?.invalid && myForm.get('email')?.touched">
      Email is required! 📧
    </div>
  `
})
export class GoodFormComponent { }

🚫 Pitfall 3: Memory Leaks with Subscriptions

// ❌ Memory leak - subscription never unsubscribed!
export class LeakyFormComponent implements OnInit {
  ngOnInit(): void {
    this.myForm.valueChanges.subscribe(value => {
      console.log(value); // 💥 This keeps running even after component is destroyed!
    });
  }
}

// ✅ Proper cleanup - use takeUntil pattern!
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

export class CleanFormComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  
  ngOnInit(): void {
    // 🛡️ Automatically unsubscribe when component is destroyed
    this.myForm.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(value => {
        console.log(value); // ✅ Clean subscription!
      });
  }
  
  ngOnDestroy(): void {
    // 🧹 Clean up subscriptions
    this.destroy$.next();
    this.destroy$.complete();
  }
}

🛠️ Best Practices

🎯 Choose the Right Approach: Use template-driven for simple forms, reactive for complex ones
📝 Validate Early: Provide immediate feedback but wait for user interaction
🛡️ Type Safety: Always define interfaces for your form data
🧹 Clean Up: Unsubscribe from form observables in ngOnDestroy
✨ User Experience: Use clear error messages with helpful guidance
🎨 Accessibility: Always include proper labels and ARIA attributes
🚀 Performance: Use OnPush change detection with reactive forms when possible

🧪 Hands-On Exercise

🎯 Challenge: Build a Job Application Form

Create a comprehensive job application form with the following features:

📋 Requirements:

✅ Personal information (name, email, phone)
💼 Work experience section (dynamic array)
🎓 Education history (multiple entries)
📎 File upload for resume
🎯 Skills with proficiency levels
📝 Cover letter text area
📅 Availability date picker
💰 Salary expectations
✅ Consent checkboxes

🚀 Advanced Features:

Custom validators for phone numbers
Dynamic form sections based on job type
Form data persistence in localStorage
Progress indicator showing completion
Preview mode before submission

💡 Solution

🔍 Click to see solution

// 🎯 Complete job application form!
interface JobApplication {
  personalInfo: {
    firstName: string;
    lastName: string;
    email: string;
    phone: string;
    linkedIn?: string;
  };
  workExperience: WorkExperience[];
  education: Education[];
  skills: Skill[];
  coverLetter: string;
  availabilityDate: Date;
  salaryExpectation: number;
  resumeFile?: File;
  consents: {
    dataProcessing: boolean;
    marketing: boolean;
  };
}

interface WorkExperience {
  company: string;
  position: string;
  startDate: Date;
  endDate?: Date;
  currentJob: boolean;
  description: string;
}

interface Education {
  institution: string;
  degree: string;
  fieldOfStudy: string;
  graduationYear: number;
}

interface Skill {
  name: string;
  proficiency: 'beginner' | 'intermediate' | 'advanced' | 'expert';
}

@Component({
  selector: 'app-job-application',
  template: `
    <div class="job-application-form">
      <h1>🚀 Dream Job Application</h1>
      
      <!-- 📊 Progress indicator -->
      <div class="progress-bar">
        <div class="progress-fill" [style.width.%]="getFormProgress()"></div>
      </div>
      <p>Form Progress: {{ getFormProgress() }}% complete 📈</p>
      
      <form [formGroup]="applicationForm" (ngSubmit)="submitApplication()">
        
        <!-- 👤 Personal Information Section -->
        <div class="form-section" formGroupName="personalInfo">
          <h2>👤 Personal Information</h2>
          
          <div class="form-row">
            <div class="form-group">
              <label>First Name *</label>
              <input formControlName="firstName" class="form-control">
            </div>
            
            <div class="form-group">
              <label>Last Name *</label>
              <input formControlName="lastName" class="form-control">
            </div>
          </div>
          
          <div class="form-group">
            <label>Email *</label>
            <input type="email" formControlName="email" class="form-control">
          </div>
          
          <div class="form-group">
            <label>Phone Number *</label>
            <input formControlName="phone" class="form-control" placeholder="+1 (555) 123-4567">
          </div>
          
          <div class="form-group">
            <label>LinkedIn Profile</label>
            <input formControlName="linkedIn" class="form-control" placeholder="https://linkedin.com/in/yourprofile">
          </div>
        </div>
        
        <!-- 💼 Work Experience Section -->
        <div class="form-section">
          <h2>💼 Work Experience</h2>
          
          <div formArrayName="workExperience">
            <div 
              *ngFor="let expGroup of workExperienceArray.controls; let i = index"
              [formGroupName]="i"
              class="experience-item">
              
              <h4>Experience #{{ i + 1 }} 💼</h4>
              
              <div class="form-row">
                <div class="form-group">
                  <label>Company *</label>
                  <input formControlName="company" class="form-control">
                </div>
                
                <div class="form-group">
                  <label>Position *</label>
                  <input formControlName="position" class="form-control">
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>Start Date *</label>
                  <input type="date" formControlName="startDate" class="form-control">
                </div>
                
                <div class="form-group" *ngIf="!expGroup.get('currentJob')?.value">
                  <label>End Date</label>
                  <input type="date" formControlName="endDate" class="form-control">
                </div>
              </div>
              
              <div class="form-group">
                <label>
                  <input type="checkbox" formControlName="currentJob">
                  This is my current job ✅
                </label>
              </div>
              
              <div class="form-group">
                <label>Job Description *</label>
                <textarea 
                  formControlName="description" 
                  rows="3"
                  class="form-control"
                  placeholder="Describe your responsibilities and achievements...">
                </textarea>
              </div>
              
              <button 
                type="button"
                (click)="removeWorkExperience(i)"
                class="btn btn-danger btn-sm">
                Remove 🗑️
              </button>
            </div>
          </div>
          
          <button 
            type="button"
            (click)="addWorkExperience()"
            class="btn btn-secondary">
            Add Work Experience ➕
          </button>
        </div>
        
        <!-- 🎓 Education Section -->
        <div class="form-section">
          <h2>🎓 Education</h2>
          
          <div formArrayName="education">
            <div 
              *ngFor="let eduGroup of educationArray.controls; let i = index"
              [formGroupName]="i"
              class="education-item">
              
              <h4>Education #{{ i + 1 }} 🎓</h4>
              
              <div class="form-row">
                <div class="form-group">
                  <label>Institution *</label>
                  <input formControlName="institution" class="form-control">
                </div>
                
                <div class="form-group">
                  <label>Degree *</label>
                  <input formControlName="degree" class="form-control">
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>Field of Study *</label>
                  <input formControlName="fieldOfStudy" class="form-control">
                </div>
                
                <div class="form-group">
                  <label>Graduation Year *</label>
                  <input type="number" formControlName="graduationYear" class="form-control" min="1950" max="2030">
                </div>
              </div>
              
              <button 
                type="button"
                (click)="removeEducation(i)"
                class="btn btn-danger btn-sm">
                Remove 🗑️
              </button>
            </div>
          </div>
          
          <button 
            type="button"
            (click)="addEducation()"
            class="btn btn-secondary">
            Add Education ➕
          </button>
        </div>
        
        <!-- 🎯 Skills Section -->
        <div class="form-section">
          <h2>🎯 Skills</h2>
          
          <div formArrayName="skills">
            <div 
              *ngFor="let skillGroup of skillsArray.controls; let i = index"
              [formGroupName]="i"
              class="skill-item">
              
              <div class="form-row">
                <div class="form-group">
                  <input 
                    formControlName="name" 
                    placeholder="Skill name (e.g., TypeScript)"
                    class="form-control">
                </div>
                
                <div class="form-group">
                  <select formControlName="proficiency" class="form-control">
                    <option value="">Select proficiency...</option>
                    <option value="beginner">🌱 Beginner</option>
                    <option value="intermediate">⚡ Intermediate</option>
                    <option value="advanced">🔥 Advanced</option>
                    <option value="expert">👑 Expert</option>
                  </select>
                </div>
                
                <button 
                  type="button"
                  (click)="removeSkill(i)"
                  class="btn btn-danger btn-sm">
                  🗑️
                </button>
              </div>
            </div>
          </div>
          
          <button 
            type="button"
            (click)="addSkill()"
            class="btn btn-secondary">
            Add Skill ➕
          </button>
        </div>
        
        <!-- 📝 Cover Letter -->
        <div class="form-section">
          <h2>📝 Cover Letter</h2>
          <div class="form-group">
            <label>Tell us why you're perfect for this role *</label>
            <textarea 
              formControlName="coverLetter"
              rows="6"
              maxlength="1000"
              class="form-control"
              placeholder="Share your passion, experience, and what makes you unique...">
            </textarea>
            <small>{{ applicationForm.get('coverLetter')?.value?.length || 0 }}/1000 characters</small>
          </div>
        </div>
        
        <!-- 📅 Additional Information -->
        <div class="form-section">
          <h2>📅 Additional Information</h2>
          
          <div class="form-row">
            <div class="form-group">
              <label>Availability Date *</label>
              <input type="date" formControlName="availabilityDate" class="form-control">
            </div>
            
            <div class="form-group">
              <label>Salary Expectation (USD) 💰</label>
              <input type="number" formControlName="salaryExpectation" class="form-control" min="0">
            </div>
          </div>
          
          <div class="form-group">
            <label>Upload Resume 📎</label>
            <input 
              type="file" 
              accept=".pdf,.doc,.docx"
              (change)="onFileSelect($event)"
              class="form-control">
          </div>
        </div>
        
        <!-- ✅ Consents -->
        <div class="form-section" formGroupName="consents">
          <h2>✅ Consents</h2>
          
          <div class="form-group">
            <label>
              <input type="checkbox" formControlName="dataProcessing">
              I consent to the processing of my personal data for recruitment purposes *
            </label>
          </div>
          
          <div class="form-group">
            <label>
              <input type="checkbox" formControlName="marketing">
              I would like to receive updates about future opportunities
            </label>
          </div>
        </div>
        
        <!-- 🚀 Submit Button -->
        <div class="form-actions">
          <button 
            type="button"
            (click)="previewApplication()"
            class="btn btn-secondary"
            [disabled]="applicationForm.invalid">
            Preview Application 👁️
          </button>
          
          <button 
            type="submit"
            [disabled]="applicationForm.invalid"
            class="btn btn-primary btn-lg">
            Submit Application 🚀
          </button>
        </div>
      </form>
    </div>
  `
})
export class JobApplicationComponent implements OnInit, OnDestroy {
  applicationForm: FormGroup;
  private destroy$ = new Subject<void>();
  
  constructor(private fb: FormBuilder) {
    this.applicationForm = this.fb.group({});
  }
  
  ngOnInit(): void {
    this.buildForm();
    this.setupFormPersistence();
  }
  
  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
  
  // 🏗️ Build the complete form structure
  private buildForm(): void {
    this.applicationForm = this.fb.group({
      personalInfo: this.fb.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        phone: ['', [Validators.required, this.phoneValidator]],
        linkedIn: ['']
      }),
      workExperience: this.fb.array([]),
      education: this.fb.array([]),
      skills: this.fb.array([]),
      coverLetter: ['', [Validators.required, Validators.maxLength(1000)]],
      availabilityDate: ['', Validators.required],
      salaryExpectation: [''],
      consents: this.fb.group({
        dataProcessing: [false, Validators.requiredTrue],
        marketing: [false]
      })
    });
    
    // 🚀 Start with one entry in each array
    this.addWorkExperience();
    this.addEducation();
    this.addSkill();
  }
  
  // 📱 Phone number validator
  private phoneValidator(control: AbstractControl): ValidationErrors | null {
    const phonePattern = /^[\+]?[(]?[\d\s\-\(\)]{10,}$/;
    if (control.value && !phonePattern.test(control.value)) {
      return { phone: { message: 'Please enter a valid phone number 📱' } };
    }
    return null;
  }
  
  // 📊 Calculate form completion progress
  getFormProgress(): number {
    let totalFields = 0;
    let filledFields = 0;
    
    // Count all form controls recursively
    this.countFormFields(this.applicationForm, { total: totalFields, filled: filledFields });
    
    return totalFields > 0 ? Math.round((filledFields / totalFields) * 100) : 0;
  }
  
  // 🔢 Recursive field counter
  private countFormFields(formGroup: AbstractControl, counter: {total: number, filled: number}): void {
    if (formGroup instanceof FormGroup) {
      Object.keys(formGroup.controls).forEach(key => {
        this.countFormFields(formGroup.get(key)!, counter);
      });
    } else if (formGroup instanceof FormArray) {
      formGroup.controls.forEach(control => {
        this.countFormFields(control, counter);
      });
    } else {
      counter.total++;
      if (formGroup.value && formGroup.value !== '') {
        counter.filled++;
      }
    }
  }
  
  // 💼 Work experience array methods
  get workExperienceArray(): FormArray {
    return this.applicationForm.get('workExperience') as FormArray;
  }
  
  addWorkExperience(): void {
    const experienceGroup = this.fb.group({
      company: ['', Validators.required],
      position: ['', Validators.required],
      startDate: ['', Validators.required],
      endDate: [''],
      currentJob: [false],
      description: ['', Validators.required]
    });
    
    this.workExperienceArray.push(experienceGroup);
  }
  
  removeWorkExperience(index: number): void {
    if (this.workExperienceArray.length > 1) {
      this.workExperienceArray.removeAt(index);
    }
  }
  
  // 🎓 Education array methods
  get educationArray(): FormArray {
    return this.applicationForm.get('education') as FormArray;
  }
  
  addEducation(): void {
    const educationGroup = this.fb.group({
      institution: ['', Validators.required],
      degree: ['', Validators.required],
      fieldOfStudy: ['', Validators.required],
      graduationYear: ['', [Validators.required, Validators.min(1950), Validators.max(2030)]]
    });
    
    this.educationArray.push(educationGroup);
  }
  
  removeEducation(index: number): void {
    if (this.educationArray.length > 1) {
      this.educationArray.removeAt(index);
    }
  }
  
  // 🎯 Skills array methods
  get skillsArray(): FormArray {
    return this.applicationForm.get('skills') as FormArray;
  }
  
  addSkill(): void {
    const skillGroup = this.fb.group({
      name: ['', Validators.required],
      proficiency: ['', Validators.required]
    });
    
    this.skillsArray.push(skillGroup);
  }
  
  removeSkill(index: number): void {
    if (this.skillsArray.length > 1) {
      this.skillsArray.removeAt(index);
    }
  }
  
  // 📎 File upload handler
  onFileSelect(event: any): void {
    const file = event.target.files[0];
    if (file) {
      console.log('📎 File selected:', file.name);
      // You would typically upload this to a service
    }
  }
  
  // 💾 Form persistence in localStorage
  private setupFormPersistence(): void {
    // Load saved data
    const savedData = localStorage.getItem('jobApplicationDraft');
    if (savedData) {
      this.applicationForm.patchValue(JSON.parse(savedData));
    }
    
    // Save data on changes
    this.applicationForm.valueChanges
      .pipe(
        debounceTime(1000), // Wait 1 second after last change
        takeUntil(this.destroy$)
      )
      .subscribe(value => {
        localStorage.setItem('jobApplicationDraft', JSON.stringify(value));
        console.log('💾 Draft saved automatically');
      });
  }
  
  // 👁️ Preview application
  previewApplication(): void {
    console.log('👁️ Application Preview:', this.applicationForm.value);
    // You could open a modal or navigate to a preview page
  }
  
  // 🚀 Submit application
  submitApplication(): void {
    if (this.applicationForm.valid) {
      const application: JobApplication = this.applicationForm.value;
      console.log('🎉 Application submitted successfully!', application);
      
      // Clear the draft
      localStorage.removeItem('jobApplicationDraft');
      
      // Submit to backend
      this.processApplication(application);
    }
  }
  
  // 📤 Process application submission
  private processApplication(application: JobApplication): void {
    console.log('📤 Processing job application...', application);
    
    // Simulate API call
    setTimeout(() => {
      console.log('✅ Application submitted successfully!');
      console.log('📧 You will receive a confirmation email shortly.');
      console.log('🤞 Good luck with your application!');
    }, 2000);
  }
}

🎓 Key Takeaways

You’ve learned so much about Angular forms! Here’s what you can now do:

✅ Create template-driven forms with ngModel and validation 💪
✅ Build reactive forms with FormBuilder and FormGroup 🛡️
✅ Implement custom validators for specific business rules 🎯
✅ Handle dynamic form arrays for repeating sections 🐛
✅ Apply best practices for form validation and user experience 🚀

Remember: Angular forms are your gateway to collecting user data safely and elegantly! Both approaches have their strengths—choose the right tool for each job. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Angular forms with TypeScript!

Here’s what to do next:

💻 Practice with the job application exercise above
🏗️ Build forms for your own Angular projects
📚 Move on to our next tutorial: Angular HTTP Client with TypeScript
🌟 Share your awesome forms with the Angular community!

Remember: Every Angular developer needs to master forms—you’re now equipped with both template-driven and reactive approaches. Keep building, keep learning, and most importantly, create amazing user experiences! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn