🎯 Angular Forms Showcase

A comprehensive showcase of all Angular form implementation approaches

🚀 Live Demo • 📖 Documentation • 🛠️ Setup

---

✨ Experience the power of Angular forms in action

Compare Reactive Forms, Template-Driven Forms, and the modern Signals approach side by side

🌟 Overview

Angular Forms Showcase is an interactive web application that demonstrates four different approaches to building forms in Angular. Perfect for developers who want to understand the differences, benefits, and use cases of each form implementation strategy.

🎨 Beautiful, Interactive Design

• Modern UI with gradient themes for each form type
• Real-time validation indicators and feedback
• Responsive design that works on all devices
• Live form status tracking with visual indicators

📚 Educational Value

• Side-by-side comparisons of different approaches
• Real-world validation examples and patterns
• Best practices implementation for each method
• Performance insights and architectural decisions

🚀 Features

📋 Four Complete Form Implementations

1️⃣ Reactive Forms with Signals

Modern Angular with signal-based state management

// Signal-based validation messages
protected readonly emailError = computed(() => {
  const control = this.form.get('email');
  if (control?.errors?.['required']) return 'Email is required';
  if (control?.errors?.['email']) return 'Invalid email format';
  return '';
});

• ✅ Signal-driven validation messages
• ✅ Computed properties for reactive UI updates
• ✅ Type-safe FormControl interfaces
• ✅ Modern Angular best practices

2️⃣ Reactive Forms (Classic)

Traditional reactive forms approach

// Classic method-based validation
protected getEmailError(): string {
  const control = this.form.get('email');
  if (control?.errors?.['required']) return 'Email is required';
  return '';
}

• ✅ FormBuilder patterns
• ✅ Validator functions
• ✅ Traditional methods for error handling
• ✅ Backward compatibility

3️⃣ Template-Driven Forms

Simple, declarative form approach

<!-- Template-driven validation -->
<input [(ngModel)]="userData.email" #email="ngModel" 
       required email class="form-input">

• ✅ Two-way data binding with ngModel
• ✅ Template reference variables
• ✅ HTML5 validation attributes
• ✅ Minimal component code

4️⃣ Template-Driven with Signals

Hybrid approach combining templates with signals

// Signal-based state with template binding
protected readonly userData = signal<UserData>({
  email: '', firstName: '', lastName: ''
});

protected readonly isEmailValid = computed(() => {
  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
  return emailRegex.test(this.userData().email);
});

• ✅ Best of both worlds approach
• ✅ Signal-driven reactive state
• ✅ Template simplicity with modern reactivity
• ✅ Real-time status indicators

🎯 Advanced Form Features

Each implementation includes:

• 📝 Comprehensive Validation: Required fields, email validation, min/max lengths, custom validators
• 🔄 Real-time Feedback: Instant validation messages and visual indicators
• 📱 Responsive Design: Mobile-first approach with adaptive layouts
• 🎨 Visual Feedback: Color-coded validation states and loading indicators
• ♿ Accessibility: ARIA labels, semantic HTML, keyboard navigation
• 🚀 Performance: Lazy-loaded components and optimized bundle sizes

🛠️ Tech Stack

Core Technologies

• Angular 20 - Latest features including standalone components
• TypeScript 5.9 - Strict type checking and modern language features
• RxJS 7.8 - Reactive programming patterns
• Signals - Angular's modern reactivity system

Development & Build

• Angular CLI - Project scaffolding and build tools
• SCSS - Modern CSS with variables and mixins
• ESLint + Prettier - Code quality and formatting
• Karma + Jasmine - Unit testing framework

Deployment & CI/CD

• GitHub Actions - Automated deployment pipeline
• GitHub Pages - Static site hosting
• Webpack - Module bundling and optimization

🚦 Getting Started

Prerequisites

• Node.js 18+
• npm 9+
• Angular CLI 20+

Installation

# Clone the repository
git clone https://github.com/tmac12/angular-forms.git

# Navigate to project directory
cd angular-forms

# Install dependencies
npm install

# Start development server
npm start

The application will be available at http://localhost:4200/

Available Scripts

npm start              # Start development server
npm run build          # Build for production
npm run build:gh-pages # Build for GitHub Pages deployment
npm test               # Run unit tests
npm run lint           # Run ESLint

🏗️ Project Structure

angular-forms/
├── 📁 src/app/
│   ├── 📁 components/
│   │   ├── 📁 form-selector/           # Landing page component
│   │   ├── 📁 reactive-form-signals/   # Reactive + Signals
│   │   ├── 📁 reactive-form-classic/   # Traditional reactive
│   │   ├── 📁 template-driven-form/    # Template-driven
│   │   ├── 📁 template-driven-form-signals/ # Hybrid approach
│   │   └── 📁 shared/                  # Shared styles & utilities
│   ├── 📄 app.routes.ts               # Lazy-loaded routing
│   └── 📄 app.config.ts               # App configuration
├── 📁 .github/workflows/              # CI/CD pipeline
├── 📄 angular.json                    # Angular CLI config
└── 📄 package.json                    # Dependencies & scripts

🔧 Key Implementation Details

Routing Strategy

// Lazy-loaded components for better performance
export const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { 
    path: 'reactive-signals', 
    loadComponent: () => import('./components/reactive-form-signals/...')
  }
];

Signal Integration

// Modern reactive patterns with signals
protected readonly formData = signal<UserData | null>(null);
protected readonly isFormValid = computed(() => this.validateForm());

Styling Architecture

// Shared SCSS modules for consistency
@use '../shared/form-styles';

.form-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
}

🚀 Deployment

GitHub Pages (Automated)

The project includes automated deployment to GitHub Pages via GitHub Actions:

1. Push to main branch triggers deployment
2. Build process optimizes for production
3. Deploy to GitHub Pages automatically
4. Live site available at https://tmac12.github.io/angular-forms/

Manual Deployment

# Build for production
npm run build:gh-pages

# Deploy to your hosting provider
# Files will be in dist/angular-forms/browser/

📖 Documentation

Form Implementation Guides

• 🔄 Reactive Forms with Signals
• ⚡ Reactive Forms Classic
• 📝 Template-Driven Forms
• 🔀 Hybrid Template + Signals

Architecture Decisions

• 🏗️ Component Architecture
• 🎨 Styling Strategy
• 🚀 Performance Optimizations

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development Guidelines

1. Follow Angular style guide and best practices
2. Write tests for new features
3. Update documentation for significant changes
4. Use conventional commits for commit messages

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Angular Team - For the amazing framework and new Signals API
• Community Contributors - For feedback and suggestions
• Claude Code - AI assistant that helped build this showcase

---

Built with ❤️ using Angular 20 and modern web technologies

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature