Orqestria Download
← Zurück zum Katalog

Skill · Version 1.0.0

Angular Reactive Forms

Implementiert typisierte Formulare, feldübergreifende Regeln und Serverrückmeldungen mit nachvollziehbarem Absendeverhalten.

angular-reactive-forms

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze diesen Skill für wiederholbare Abschnitte, asynchrone Prüfungen oder unklare deaktivierte Zustände.

Wobei hilft er dir?

  • Wählt typisierte Gruppen, Listen und Records passend zur Feldstruktur.
  • Ordnet einzelne und übergreifende Prüfungen zu und begrenzt Prüfanfragen.
  • Verknüpft Serverfehler mit Feldern und verhindert doppeltes Speichern.

Das könntest du fragen

Baue ein Rechnungsformular mit Positionen, Datumsbereichsprüfung und Fehlermeldungen direkt an den betroffenen Feldern. Füge Positionen hinzu, entferne sie und lasse den Server einen Zeitraum ablehnen. Fehler gehören zu den richtigen Feldern; Positionen und Summen bleiben erhalten.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

Reactive Forms

Build predictable, strictly typed Angular Reactive Forms with clear separation between field validation, cross-field rules and server validation feedback.

1. Typed Reactive Forms (FormGroup, NonNullableFormBuilder, FormArray)

  • Use typed FormBuilder / NonNullableFormBuilder (inject(NonNullableFormBuilder)) so form.getRawValue() and form.value carry exact TypeScript types (FormControl<string> vs FormControl<string | null>).
  • Remember that form.value omits disabled controls (Partial), whereas form.getRawValue() includes disabled controls with their full type.
  • For dynamic lists or repeatable field sets, use FormArray<FormGroup<...>>; for dynamic string keys with uniform control types, use FormRecord<FormControl<...>>.
  • When populating existing data into a form, choose patchValue (partial updates) vs reset(model) (which also resets dirty/touched states) deliberately, and pass { emitEvent: false } when hydrating initial data should not trigger valueChanges pipelines.

2. Sync, cross-field and async validation

  • Attach single-field validators (Validators.required, custom ValidatorFn) to the FormControl, and cross-field validators (date ranges, password confirmation, totals) to the parent FormGroup.
  • For async validators (AsyncValidatorFn), debounce or run on updateOn: 'blur' so every keystroke does not fire a network request, and handle errors gracefully inside the observable.
  • Show field errors only when appropriate (control.invalid && (control.touched || formSubmitted)), and call form.markAllAsTouched() when the user attempts to submit an invalid form.

3. Submission lifecycle and server validation errors

  • Prevent duplicate submissions by guarding on form.pending || isSubmitting (or using exhaustMap).
  • Map field-level server errors onto matching controls via control.setErrors({ server: message }) while preserving a form-level banner/alert for general or unmapped server errors.

Before you finish

  • Controls use strict types (NonNullableFormBuilder where reset should restore defaults rather than null).
  • disabled, touched, dirty and pending states are handled and reflected in the UI.
  • Field, cross-field and server validation errors display clearly without losing user input.

Enthaltene Dateien 2

  • LICENSE.txt
  • SKILL.md

Über dieses Skill-Paket

angular-reactive-forms

angular-reactive-forms: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Details…Weniger anzeigen

angular-reactive-forms

angular-reactive-forms: Entwickelt wartbare Angular-Funktionen mit klaren Komponentengrenzen, reaktivem Zustand, Formularen und geprüften Migrationen.

Enthält den vollständigen Skill und seine Begleitdateien (2 Dateien). Der genaue, ursprünglich verfasste Anwendungsbereich bleibt unten erhalten.

Ursprüngliche Skill-Beschreibung (Quellsprache)

Use when building, validating or debugging Angular Reactive Forms, typed FormGroup, FormControl, FormRecord and FormArray, custom sync/async validators, dynamic form controls, or mapping server validation errors.

Installiere den Skill, prüfe seine Quelle und Vertrauenseinstellungen und aktiviere ihn für das passende Projekt oder den Agenten.

Voraussetzungen

  • Orqestria auf deinem Computer installiert.