Orqestria Letöltés
← Vissza a katalógushoz

Skill · 1.0.0 verzió

Angular Reactive Forms

Típusos mezőkkel, összefüggő ellenőrzéssel és szerverhibák kezelésével teszi kiszámíthatóvá az űrlapbeküldést.

angular-reactive-forms

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha ismételhető mezőcsoportok, aszinkron ellenőrzések vagy összetett állapotok vannak az űrlapon.

Miben segít neked?

  • A mezőszerkezethez illő csoportokat, listákat és rekordokat választ.
  • Helyesen osztja el a mező- és csoportszintű ellenőrzéseket.
  • Mezőkhöz rendeli a szerverhibákat és megelőzi a dupla mentést.

Például ezt kérheted

Készíts számlaűrlapot ismételhető tételekkel, dátumtartomány-ellenőrzéssel és a megfelelő mezőknél megjelenő szerverhibákkal. Adj hozzá és törölj tételeket, majd a szerver utasítson el egy dátumtartományt. A megfelelő mezők jelezzenek hibát, a tételek és összesítések maradjanak meg.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

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.

Csomagban lévő fájlok 2

  • LICENSE.txt
  • SKILL.md

A skillcsomag bemutatása

angular-reactive-forms

angular-reactive-forms: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.

Részletek…Összecsukás

angular-reactive-forms

angular-reactive-forms: Jól karbantartható Angular funkciókat készít világos komponenshatárokkal, reaktív állapottal, űrlapokkal és tesztelt migrációkkal.

A teljes skillt és a hozzá tartozó fájlokat tartalmazza (2 fájl). Az alábbi eredeti leírás rögzíti a pontos alkalmazási területét.

A skill eredeti leírása (a forrás nyelvén)

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.

Telepítsd a skillt, nézd át a forrását és a megbízhatósági beállításait, majd engedélyezd a megfelelő projektben vagy ügynöknél.

Előfeltételek

  • A számítógépedre telepített Orqestria.