🧱 Angular Forms: Reactive vs. Signals – Was du wann brauchst

Formulare sind Herzstücke vieler Anwendungen – aber welche Strategie passt wann?

In diesem Beitrag klären wir:

• Wann du Reactive Forms brauchst
• Wann Signals sinnvoller sind
• Und wie du beide Ansätze clever kombinierst

🔧 Reactive Forms – Der Klassiker

form = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
});

✅ Vorteile:

• Große Community & Dokumentation
• Funktioniert super mit Angular Material
• Gut testbar
• Built-in Validators & Async-Validation

❌ Nachteile:

• Boilerplate
• Verbundene Logik in der Component
• Wenig „reactive elegance“

⚡ Signal-basierte Forms – Die neue Leichtigkeit

const name = signal('');
const email = signal('');

const isValid = computed(() => name().length > 1 && email().includes('@'));

✅ Vorteile:

• Ultra leichtgewichtig
• Perfekt für kleinere UIs, Modals, Settings
• Kombinierbar mit SignalStore
• Kein Control, kein PatchValue nötig

❌ Nachteile:

• Noch kein offizieller Standard
• Keine native Angular Forms API (z. B. für FormGroup/FormControl)
• Kein FormBuilder, kein Status-Tracking out of the box

🧠 Wann was nutzen?

🧪 Kombi-Pattern

Nutze Reactive im Container, und Signals im Presentational:

@Component({ /* Smart */ })
export class FormShellComponent {
  form = this.fb.group({
    value: ['', Validators.required]
  });
}

@Component({ /* Dumb */ })
export class FormViewComponent {
  @Input() value!: Signal<string>;
}

✅ Fazit

Beide Ansätze haben ihre Berechtigung.

Wichtig ist, dass du bewusst entscheidest:

• Komplexität? → Reactive Forms
• Klarheit & Leichtigkeit? → Signals

📍 Bald im Blog: 📊 Angular + Highcharts – Dynamische Visualisierungen für Profis