@ng-simplicity/forms-core 1.1.3 → 1.1.5

package/fesm2022/ng-simplicity-forms-core.mjs

@@ -1,9 +1,9 @@
-import { Subject, takeUntil, BehaviorSubject, map, filter, merge, of } from 'rxjs';
+import { Subject, takeUntil, BehaviorSubject, switchMap, defer, map, distinctUntilChanged, merge, of } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Directive, InjectionToken, inject, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, Input, computed, ChangeDetectionStrategy, Component, ElementRef, Sanitizer, SecurityContext, NgModule } from '@angular/core';
+import { Directive, InjectionToken, inject, Injectable, ChangeDetectorRef, Injector, ViewContainerRef, Input, computed, ChangeDetectionStrategy, Component, ElementRef, afterNextRender, Sanitizer, SecurityContext, NgModule } from '@angular/core';
 import { v4 } from 'uuid';
+import { FormArray, FormGroup, UntypedFormGroup, FormControl, Validators, UntypedFormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { UntypedFormGroup, FormControl, FormGroup, FormArray, UntypedFormArray, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 
 /** Base class that ties RxJS subscriptions to the component's lifetime. */
@@ -32,8 +32,18 @@ const NGS_FORMS_ITEM_DATA = new InjectionToken('ngs-forms-item-data');
  * @internal
  */
 const NGS_FORMS_CONTROL_ADD_REMOVE_FN = new InjectionToken('ngs-form-control-remove-fn');
-/** Injection token for the row index when a component is rendered inside a form array list. */
+/**
+ * Injection token for the row index when a component is rendered inside a form array list.
+ *
+ * @remarks This is the index the row had when the component was created. Rows before it can be removed later,
+ * so to find a row's current position use `NGS_FORMS_ARRAY_ROW` with `formArray.controls.indexOf(row)`.
+ */
 const NGS_FORMS_ITEM_INDEX = new InjectionToken('ngs-forms-item-index');
+/**
+ * Injection token for the `UntypedFormGroup` of the form array row a component is rendered in. Unlike
+ * `NGS_FORMS_ITEM_INDEX`, it stays correct when earlier rows are removed.
+ */
+const NGS_FORMS_ARRAY_ROW = new InjectionToken('ngs-forms-array-row');
 /**
  * @internal
  */
@@ -43,10 +53,12 @@ const NgsFormsFormControlAddRemoveFunctions = {
         remove: (control, controlName) => formGroup.removeControl(controlName),
     }),
     formArray: (formArray) => ({
-        add: (control, controlName) => formArray.controls.push(control),
-        remove: (control, controlName) => {
+        add: (control) => formArray.push(control),
+        remove: (control) => {
             const index = formArray.controls.indexOf(control);
-            formArray.controls.splice(index, 1);
+            if (index >= 0) {
+                formArray.removeAt(index);
+            }
         },
     }),
 };
@@ -65,6 +77,202 @@ function ngsDefaults(target, ...sources) {
     return result;
 }
 
+/**
+ * Builds the object for `NgsFormsService.setServerErrorMessages()` from a flat list of paths and error keys, for
+ * APIs that return their errors that way. Array indexes create arrays, and rows without errors are filled with `{}`.
+ * Two errors on the same path become an array of keys.
+ *
+ * @example
+ * ```ts
+ * constructServerErrorMessageObject([
+ *   { jsonPath: 'registration.userName', validator: 'taken' },
+ *   { jsonPath: 'registration.contacts[2].phone', validator: 'invalidPhone' },
+ * ]);
+ * // { registration: { userName: 'taken', contacts: [{}, {}, { phone: 'invalidPhone' }] } }
+ * ```
+ */
+function constructServerErrorMessageObject(errors) {
+    const result = {};
+    for (const { jsonPath, validator } of errors) {
+        const segments = parseJsonPath(jsonPath);
+        if (!segments.length || !validator)
+            continue;
+        let node = result;
+        segments.forEach((segment, i) => {
+            const isLast = i === segments.length - 1;
+            if (Array.isArray(node) && typeof segment === 'number') {
+                while (node.length < segment)
+                    node.push({});
+            }
+            if (isLast) {
+                const existing = node[segment];
+                if (typeof existing === 'string') {
+                    node[segment] = existing === validator ? existing : [existing, validator];
+                }
+                else if (Array.isArray(existing) && existing.every((e) => typeof e === 'string')) {
+                    if (!existing.includes(validator))
+                        existing.push(validator);
+                }
+                else {
+                    node[segment] = validator;
+                }
+                return;
+            }
+            const nextIsIndex = typeof segments[i + 1] === 'number';
+            const existing = node[segment];
+            if (existing === undefined || existing === null || typeof existing !== 'object') {
+                node[segment] = nextIsIndex ? [] : {};
+            }
+            else if (nextIsIndex && !Array.isArray(existing) && Object.keys(existing).length === 0) {
+                // A `{}` placeholder for an array row that is itself an array.
+                node[segment] = [];
+            }
+            node = node[segment];
+        });
+    }
+    return result;
+}
+/** Splits `a.b[2]['c d']` into `['a', 'b', 2, 'c d']`. */
+function parseJsonPath(jsonPath) {
+    const path = (jsonPath ?? '').trim().replace(/^\$\.?/, '');
+    const segments = [];
+    const pattern = /\[\s*(\d+)\s*\]|\[\s*(['"])(.*?)\2\s*\]|([^.[\]]+)/g;
+    let match;
+    while ((match = pattern.exec(path)) !== null) {
+        if (match[1] !== undefined)
+            segments.push(Number(match[1]));
+        else if (match[3] !== undefined)
+            segments.push(match[3]);
+        else if (match[4] !== undefined)
+            segments.push(match[4]);
+    }
+    return segments;
+}
+/**
+ * Marker on the error value of a server error (`control.errors[key][NGS_FORMS_SERVER_ERROR] === true`). When the
+ * key has no entry in `errorMessageMap`, the key itself is shown as the message, so servers can send message text.
+ */
+const NGS_FORMS_SERVER_ERROR = 'ngsServerError';
+/**
+ * Applies server errors to a form and clears each one when its control's value changes.
+ *
+ * @internal Used by `NgsFormsService`.
+ */
+class NgsFormsServerErrorRegistry {
+    entries = new Map();
+    /**
+     * Validator that reports a control's server errors. Form items include it whenever they set their validators,
+     * so the errors survive re-validation until the control's value changes.
+     */
+    validator = (control) => this.validate(control);
+    /** `true` while at least one server error is set. */
+    get hasErrors() {
+        return this.entries.size > 0;
+    }
+    /** Replaces every server error with `errors`. Returns the paths that matched no control. */
+    set(root, errors) {
+        this.clear();
+        const unmatched = [];
+        this.apply(root, errors, '', unmatched);
+        return unmatched;
+    }
+    /** Removes every server error. */
+    clear() {
+        if (!this.entries.size)
+            return;
+        const controls = Array.from(this.entries.keys());
+        this.entries.clear();
+        controls.forEach((control) => control.updateValueAndValidity());
+    }
+    /** Forgets every server error without re-validating, for when the controls are being thrown away. */
+    reset() {
+        this.entries.clear();
+    }
+    apply(control, errors, path, unmatched) {
+        if (errors === null || errors === undefined)
+            return;
+        if (typeof errors === 'string' || (Array.isArray(errors) && errors.length > 0 && errors.every((e) => typeof e === 'string'))) {
+            this.applyKeys(control, typeof errors === 'string' ? [errors] : errors);
+            return;
+        }
+        if (Array.isArray(errors)) {
+            if (!(control instanceof FormArray)) {
+                if (errors.some((e) => !isEmpty(e)))
+                    unmatched.push(path);
+                return;
+            }
+            errors.forEach((rowErrors, index) => {
+                if (isEmpty(rowErrors))
+                    return;
+                const row = control.at(index);
+                const rowPath = `${path}[${index}]`;
+                if (!row) {
+                    unmatched.push(rowPath);
+                    return;
+                }
+                this.apply(row, rowErrors, rowPath, unmatched);
+            });
+            return;
+        }
+        if (!(control instanceof FormGroup)) {
+            if (!isEmpty(errors))
+                unmatched.push(path);
+            return;
+        }
+        for (const [name, childErrors] of Object.entries(errors)) {
+            if (isEmpty(childErrors))
+                continue;
+            const childPath = path ? `${path}.${name}` : name;
+            const child = control.get([name]);
+            if (!child) {
+                unmatched.push(childPath);
+                continue;
+            }
+            this.apply(child, childErrors, childPath, unmatched);
+        }
+    }
+    applyKeys(control, keys) {
+        this.entries.set(control, { keys, value: control.value });
+        if (!control.hasValidator(this.validator)) {
+            control.addValidators(this.validator);
+        }
+        // Show the message straight away, without waiting for the user to touch the field.
+        control.markAsTouched();
+        control.updateValueAndValidity();
+    }
+    validate(control) {
+        const entry = this.entries.get(control);
+        if (!entry)
+            return null;
+        if (!sameValue(control.value, entry.value)) {
+            this.entries.delete(control);
+            return null;
+        }
+        return Object.fromEntries(entry.keys.map((key) => [key, { [NGS_FORMS_SERVER_ERROR]: true }]));
+    }
+}
+function isEmpty(errors) {
+    if (errors === null || errors === undefined || errors === '')
+        return true;
+    if (Array.isArray(errors))
+        return errors.every(isEmpty);
+    if (typeof errors === 'object')
+        return Object.values(errors).every(isEmpty);
+    return false;
+}
+function sameValue(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+        return false;
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch {
+        return false;
+    }
+}
+
 /**
  * Root base class for every form item component. Reads the item's configuration from `NGS_FORMS_ITEM_DATA`.
  *
@@ -148,10 +356,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * ```
  */
 class NgsFormsService {
-    /**
-     * @internal
-     */
-    attempt = 0;
     /**
      * Emits the root form group's value every time it changes. Combine with `toSignal()` to read it in a template.
      *
@@ -161,8 +365,20 @@ class NgsFormsService {
     /** The latest value emitted by `formValue$`. */
     formValue = {};
     internalFormService;
-    formGroupSubscriptions = [];
+    formGroupBinding;
     formGroup = new UntypedFormGroup({});
+    /** The config from the latest `setFormConfig()` call, re-applied when `<ngs-form>` (re)connects. */
+    lastConfig;
+    missingFormTimer;
+    destroyed = false;
+    /** Patches still being applied while the form renders, in call order. */
+    pendingPatches = [];
+    patchTimer;
+    /** The controls that existed when the pending patches were last applied. */
+    patchedStructure;
+    patchRounds = 0;
+    /** Render passes in a row in which no control was added or removed. */
+    stablePatchRounds = 0;
     /** `true` once the user has changed any control in the form. */
     get dirty() {
         return this.formGroup?.dirty ?? false;
@@ -180,27 +396,53 @@ class NgsFormsService {
     /**
      * Renders a form from `formConfig`, replacing any form that is already shown and resetting the submitted state.
      *
-     * @remarks It is safe to call before `<ngs-form>` has initialised (for example in `ngOnInit`): the call is retried
-     * every 25 ms for about half a second until the form component is available.
+     * @remarks It is safe to call before `<ngs-form>` has initialised (for example in `ngOnInit`): the latest config
+     * is kept and applied as soon as the form component connects, and also when it is destroyed and created again
+     * (inside an `@if` or a tab, for example). An error is logged if no form has connected after half a second.
      */
     setFormConfig(formConfig) {
-        if (!this.internalServiceIsSet) {
-            if (this.attempt > 20) {
-                console.error('Internal form service is unavailable.  Is the ngs-form root tag added to the page?');
-                return;
-            }
-            this.attempt++;
-            setTimeout(() => this.setFormConfig(formConfig), 25);
+        this.lastConfig = formConfig;
+        // Patches made for the previous form do not carry over. Patches made after this call are kept until it renders.
+        this.cancelPendingPatches();
+        if (this.internalServiceIsSet) {
+            this.internalFormService.setFormData(formConfig);
             return;
         }
-        this.internalFormService.setFormData(formConfig);
+        if (this.missingFormTimer === undefined && !this.destroyed) {
+            this.missingFormTimer = setTimeout(() => {
+                this.missingFormTimer = undefined;
+                if (!this.internalServiceIsSet && !this.destroyed) {
+                    console.error('Internal form service is unavailable.  Is the ngs-form root tag added to the page?');
+                }
+            }, 500);
+        }
     }
     /**
      * @internal
      */
     setInternalService(internalFormsService) {
+        this.formGroupBinding?.unsubscribe();
         this.internalFormService = internalFormsService;
         this.bindFormGroup();
+        if (this.lastConfig) {
+            internalFormsService.setFormData(this.lastConfig);
+        }
+        if (this.pendingPatches.length) {
+            this.schedulePatchRound();
+        }
+    }
+    /**
+     * @internal
+     * Disconnects `internalFormsService` when its `<ngs-form>` is destroyed. Does nothing if another form has
+     * connected since.
+     */
+    clearInternalService(internalFormsService) {
+        if (this.internalFormService !== internalFormsService)
+            return;
+        this.formGroupBinding?.unsubscribe();
+        this.formGroupBinding = undefined;
+        this.internalFormService = undefined;
+        this.formGroup = new UntypedFormGroup({});
     }
     /**
      * Marks the form as submitted (or not). While submitted, every invalid control shows its error message even if
@@ -212,13 +454,14 @@ class NgsFormsService {
         this.internalFormService.setIsSubmitted(isSubmitted);
     }
     bindFormGroup() {
-        this.internalFormService.formGroup$.subscribe((fg) => {
+        this.formGroupBinding = this.internalFormService.formGroup$
+            .pipe(switchMap((fg) => {
             this.formGroup = fg;
-            this.formGroupSubscriptions.forEach((subscription) => subscription.unsubscribe());
-            this.formGroupSubscriptions.push(this.formGroup.valueChanges.subscribe((v) => {
-                this.formValue = v;
-                this.formValue$.next(v);
-            }));
+            return fg.valueChanges;
+        }))
+            .subscribe((v) => {
+            this.formValue = v;
+            this.formValue$.next(v);
         });
     }
     /**
@@ -233,16 +476,106 @@ class NgsFormsService {
         this.internalFormService?.updateGlobalState(state);
     }
     ngOnDestroy() {
-        this.formGroupSubscriptions.forEach((subscription) => subscription.unsubscribe());
+        this.destroyed = true;
+        clearTimeout(this.missingFormTimer);
+        this.missingFormTimer = undefined;
+        this.cancelPendingPatches();
+        this.formGroupBinding?.unsubscribe();
+        this.formValue$.complete();
+    }
+    /**
+     * Shows errors from the server on the matching controls, replacing any server errors shown before.
+     *
+     * @param errors - An object shaped like the form value (including the root group name) whose leaves are error
+     * keys, for example `{ registration: { userName: 'taken', contacts: [{}, {}, { phone: 'invalid' }] } }`. Each key
+     * is looked up in that control's `errorMessageMap`; when it has no entry the key itself is shown, so the server
+     * can also send the message text. Use `constructServerErrorMessageObject()` to build it from a list of paths.
+     * @returns The paths that matched no rendered control (a hidden item or a missing array row, for example), so you
+     * can show those errors elsewhere.
+     *
+     * @remarks The controls are marked as touched so the messages show at once, and they stay invalid until their
+     * value changes. All server errors are cleared by the next call, by `clearServerErrorMessages()`, by
+     * `setFormConfig()`, and when rows are added to or removed from a form array, because rows are matched by index.
+     */
+    setServerErrorMessages(errors) {
+        if (!this.internalFormService) {
+            console.error('setServerErrorMessages() was called before <ngs-form> connected.');
+            return [];
+        }
+        return this.internalFormService.serverErrors.set(this.formGroup, errors);
+    }
+    /** Removes every error set with `setServerErrorMessages()`. */
+    clearServerErrorMessages() {
+        this.internalFormService?.serverErrors.clear();
     }
     /**
      * Patches values into the form, using the same shape as `formValue$` (including the root group name).
      *
-     * @remarks Only controls that are currently rendered receive values. Patch again after a conditional item becomes
-     * visible, and make sure a form array has enough rows (see `initialItemCount`) before patching array values.
+     * @remarks It is safe to call straight after `setFormConfig()`, or before `<ngs-form>` has connected. The values
+     * are applied at once to the controls that exist, kept, and applied again each time new controls appear, until
+     * the form stops changing. That covers items that render later and items behind `visible$` that the patched values
+     * themselves reveal (and anything those reveal in turn). Later calls are applied after earlier ones. A form array
+     * only receives values for rows it has, so give it enough rows with `initialItemCount`. `setFormConfig()` drops
+     * patches that are still being applied to the previous form.
      */
     patchValue(entityData) {
-        this.formGroup.patchValue(entityData);
+        this.pendingPatches.push(entityData);
+        this.applyPendingPatches();
+        this.patchRounds = 0;
+        this.stablePatchRounds = 0;
+        this.schedulePatchRound();
+    }
+    /** Maximum number of render passes a patch waits for new controls before it is dropped. */
+    static MAX_PATCH_ROUNDS = 20;
+    applyPendingPatches() {
+        for (const patch of this.pendingPatches) {
+            this.formGroup.patchValue(patch);
+        }
+        this.patchedStructure = this.internalServiceIsSet ? controlStructure(this.formGroup) : undefined;
+    }
+    /**
+     * Waits one render pass, then re-applies the pending patches if controls were added or removed. Stops once two
+     * passes in a row change nothing (rendering can take a pass to start), or after `MAX_PATCH_ROUNDS` passes. Waits
+     * without counting while no form is connected.
+     */
+    schedulePatchRound() {
+        clearTimeout(this.patchTimer);
+        if (this.destroyed || !this.pendingPatches.length)
+            return;
+        if (!this.internalServiceIsSet) {
+            // `setInternalService()` starts the rounds once <ngs-form> connects.
+            this.patchTimer = undefined;
+            return;
+        }
+        this.patchTimer = setTimeout(() => {
+            this.patchTimer = undefined;
+            if (this.destroyed || !this.internalServiceIsSet)
+                return;
+            const structure = controlStructure(this.formGroup);
+            if (structure === this.patchedStructure) {
+                if (++this.stablePatchRounds >= 2) {
+                    this.cancelPendingPatches();
+                    return;
+                }
+                this.schedulePatchRound();
+                return;
+            }
+            this.stablePatchRounds = 0;
+            this.applyPendingPatches();
+            if (++this.patchRounds >= NgsFormsService.MAX_PATCH_ROUNDS) {
+                this.cancelPendingPatches();
+                return;
+            }
+            this.schedulePatchRound();
+        });
+    }
+    cancelPendingPatches() {
+        clearTimeout(this.patchTimer);
+        this.patchTimer = undefined;
+        this.pendingPatches = [];
+        this.patchedStructure = undefined;
+        this.patchRounds = 0;
+        this.stablePatchRounds = 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService });
@@ -250,6 +583,18 @@ class NgsFormsService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsService, decorators: [{
             type: Injectable
         }] });
+/** A string listing the paths of every control under `control`, so a change in the form's controls can be seen. */
+function controlStructure(control, path = '') {
+    if (control instanceof FormGroup) {
+        return Object.keys(control.controls)
+            .map((name) => controlStructure(control.controls[name], `${path}.${name}`))
+            .join('|') + `|${path}{}`;
+    }
+    if (control instanceof FormArray) {
+        return control.controls.map((row, i) => controlStructure(row, `${path}[${i}]`)).join('|') + `|${path}[]`;
+    }
+    return path;
+}
 
 /**
  * Per form state holder that connects `<ngs-form>`, its items and `NgsFormsService`.
@@ -262,18 +607,23 @@ class NgsFormsInternalService {
     formConfig$ = new BehaviorSubject(undefined);
     isSubmitted$ = new BehaviorSubject(false);
     state = new BehaviorSubject({});
+    /** Server errors set with `NgsFormsService.setServerErrorMessages()`. */
+    serverErrors = new NgsFormsServerErrorRegistry();
     setIsSubmitted(isSubmitted) {
         this.isSubmitted$.next(isSubmitted);
     }
+    /** `true` when no rendered control fails its validators. A form whose controls are all disabled counts as valid. */
     checkIsValid() {
-        if (!this.formGroup$.value)
+        const formGroup = this.formGroup$.value;
+        if (!formGroup)
             return false;
-        return this.formGroup$.value.valid;
+        return formGroup.valid || formGroup.disabled === true;
     }
     setFormData(formConfig) {
         const state = { ...(formConfig.initialState ?? {}) };
         state['global'] = { ...(formConfig.globalState ?? {}) };
         this.state.next(state);
+        this.serverErrors.reset();
         this.formGroup$.next(new UntypedFormGroup({}));
         this.formConfig$.next(formConfig);
         this.isSubmitted$.next(false);
@@ -302,18 +652,13 @@ class NgsFormsInternalService {
      */
     subscribeToState(uuid, name, initialState) {
         this.seedComponentState(uuid, initialState);
-        let last = '';
-        return this.state.pipe(map((allState) => {
+        // `defer` gives every subscriber its own comparison, so each one receives the current state first.
+        return defer(() => this.state.pipe(map((allState) => {
             const stateByUuid = allState[uuid] || {};
             const stateByName = name ? (allState[name] || {}) : {};
             const globalState = allState['global'] || {};
             return ngsDefaults(stateByUuid, ngsDefaults(stateByName, globalState));
-        }), filter((currentState) => {
-            const stringifiedState = JSON.stringify(currentState);
-            const isUpdated = stringifiedState !== last;
-            last = stringifiedState;
-            return isUpdated;
-        }));
+        }), distinctUntilChanged((previous, current) => JSON.stringify(previous) === JSON.stringify(current))));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsInternalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsInternalService });
@@ -326,6 +671,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Base class for items that own a form control. Creates the control (seeded with `value` when the config has one),
  * applies `validators` / `validators$` and `disabled` / `disabled$`, registers it with the parent group under
  * `config.name` and keeps `errorMessage` up to date.
+ *
+ * @typeParam T - The item's config type.
+ * @typeParam C - The type of `control`. Inputs use the default `UntypedFormControl`; groups and arrays set it in
+ * their constructor to an `UntypedFormGroup` or `UntypedFormArray`.
  */
 class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassFormComponent {
     /** The item's form control. Bind it with `[formControl]`. */
@@ -347,15 +696,24 @@ class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassForm
             const initialValue = this.config.value;
             this.control = new FormControl(initialValue, { validators: [] });
         }
+        const control = this.control;
         this.bindValidators();
-        this.formAddRemoveFns.add(this.control, this.config.name);
+        this.formAddRemoveFns.add(control, this.config.name);
         this.bindDisabled();
-        // Listen to changes and update error message dynamically
-        this.subscribe(merge(this.control.valueChanges, this.control.statusChanges, this.privateService.isSubmitted$), () => {
+        // Recompute the error message on value, status and touched changes, and when the form is submitted.
+        // `control.events` (Angular 18+) includes touched changes, so blurring an untouched field shows its error.
+        // Angular 17 has no `events`, so there the message updates on value and status changes only.
+        const controlEvents$ = control.events ?? merge(control.valueChanges, control.statusChanges);
+        this.subscribe(merge(controlEvents$, this.privateService.isSubmitted$), () => {
             this.updateErrorMessage();
             this.changeDetectorRef.markForCheck();
         });
     }
+    /** Whether the control currently has `Validators.required` or `Validators.requiredTrue`. */
+    get isRequired() {
+        const control = this.control;
+        return !!control && (control.hasValidator(Validators.required) || control.hasValidator(Validators.requiredTrue));
+    }
     updateErrorMessage() {
         if (!this.control) {
             this.errorMessage = '';
@@ -373,21 +731,34 @@ class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassForm
         }
         const firstErrorKey = Object.keys(errors)[0];
         const map = this.config.errorMessageMap;
-        this.errorMessage = map?.[firstErrorKey] || `Field is invalid: ${firstErrorKey}`;
+        const isServerError = errors[firstErrorKey]?.[NGS_FORMS_SERVER_ERROR] === true;
+        // A server error without a mapped message shows the server's text.
+        this.errorMessage = map?.[firstErrorKey] || (isServerError ? firstErrorKey : `Field is invalid: ${firstErrorKey}`);
     }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.formAddRemoveFns.remove(this.control, this.config.name);
     }
     bindValidators() {
-        if (!this.config.validators && !this.config.validators$)
+        const control = this.control;
+        // The server error validator is always kept, so server errors survive until the control's value changes.
+        // Optional so that tests which stub `NgsFormsInternalService` keep working.
+        const serverValidators = this.privateService.serverErrors ? [this.privateService.serverErrors.validator] : [];
+        if (!this.config.validators && !this.config.validators$) {
+            control.addValidators(serverValidators);
             return;
+        }
         if (this.config.validators) {
-            this.control.setValidators(this.config.validators);
+            control.setValidators([...this.config.validators, ...serverValidators]);
+            // A group or array computed its status when it was created, before these validators were set.
+            control.updateValueAndValidity({ emitEvent: false });
             return;
         }
         if (this.config.validators$) {
-            this.subscribe(this.config.validators$, (validators) => this.control.setValidators(validators));
+            this.subscribe(this.config.validators$, (validators) => {
+                control.setValidators([...validators, ...serverValidators]);
+                control.updateValueAndValidity();
+            });
         }
     }
     bindDisabled() {
@@ -399,14 +770,21 @@ class NgsFormsFormItemWithVisibleAndValidatorsBase extends NgsFormsBaseClassForm
             this.disabledFromConfig = !!disabled;
             this.applyDisabled(control);
         });
+        const reapply = () => {
+            if (this.disabledFromConfig && control.enabled) {
+                control.disable();
+            }
+        };
         // Child controls are added to groups and arrays after the container has been disabled, and adding an enabled
         // child re-enables its parent. Re-apply the configured state whenever a container's status changes.
         if (control instanceof FormGroup || control instanceof FormArray) {
-            this.subscribe(control.statusChanges, () => {
-                if (this.disabledFromConfig && control.enabled) {
-                    control.disable();
-                }
-            });
+            this.subscribe(control.statusChanges, reapply);
+        }
+        // Enabling a parent group or array enables every child in it. The parent emits its status after its children
+        // are enabled, so re-apply the configured state then. (Doing it on the child's own status change would be undone
+        // by the end of the child's `enable()`, which re-enables the bound DOM element.)
+        if (control.parent) {
+            this.subscribe(control.parent.statusChanges, reapply);
         }
     }
     applyDisabled(control) {
@@ -485,10 +863,13 @@ class NgsFormItemController extends NgsSubscriber {
     addRemoveControlFn;
     index;
     changeDetectorRef;
+    arrayRow;
     componentRef;
-    parentVisibility = new BehaviorSubject(false);
     lastVisible;
-    constructor(injector, viewContainerRef, itemData, addRemoveControlFn, index, changeDetectorRef) {
+    /** Incremented whenever a scheduled create becomes stale (hidden again, or destroyed). */
+    createToken = 0;
+    destroyed = false;
+    constructor(injector, viewContainerRef, itemData, addRemoveControlFn, index, changeDetectorRef, arrayRow) {
         super();
         this.injector = injector;
         this.viewContainerRef = viewContainerRef;
@@ -496,9 +877,12 @@ class NgsFormItemController extends NgsSubscriber {
         this.addRemoveControlFn = addRemoveControlFn;
         this.index = index;
         this.changeDetectorRef = changeDetectorRef;
+        this.arrayRow = arrayRow;
         this.bindVisibility();
     }
     destroy() {
+        this.destroyed = true;
+        this.createToken++;
         this.detach();
         super.ngOnDestroy();
     }
@@ -506,7 +890,7 @@ class NgsFormItemController extends NgsSubscriber {
         const config = this.itemData.config;
         const visible$ = config.visible$ ?? (config.visible !== undefined ? of(config.visible) : undefined);
         if (!visible$) {
-            Promise.resolve().then(() => this.create());
+            this.scheduleCreate();
             return;
         }
         this.subscribe(visible$, (visible) => {
@@ -514,17 +898,37 @@ class NgsFormItemController extends NgsSubscriber {
                 return;
             this.lastVisible = visible;
             if (visible) {
-                Promise.resolve().then(() => this.create());
+                this.scheduleCreate();
                 return;
             }
+            // Cancels a create that was scheduled but has not run yet.
+            this.createToken++;
             this.detach();
         });
     }
+    /**
+     * Creates the component in a microtask. A create that is overtaken by a later visibility change or by
+     * `destroy()` before it runs is dropped.
+     */
+    scheduleCreate() {
+        const token = ++this.createToken;
+        Promise.resolve().then(() => {
+            if (this.destroyed || token !== this.createToken)
+                return;
+            this.create();
+        });
+    }
     create() {
+        if (this.componentRef && !this.componentRef.hostView.destroyed) {
+            return;
+        }
         const providers = [{ provide: NGS_FORMS_ITEM_DATA, useValue: this.itemData }];
         if (this.index !== undefined) {
             providers.push({ provide: NGS_FORMS_ITEM_INDEX, useValue: this.index });
         }
+        if (this.arrayRow) {
+            providers.push({ provide: NGS_FORMS_ARRAY_ROW, useValue: this.arrayRow });
+        }
         if (this.addRemoveControlFn) {
             providers.push({ provide: NGS_FORMS_CONTROL_ADD_REMOVE_FN, useValue: this.addRemoveControlFn });
         }
@@ -540,11 +944,10 @@ class NgsFormItemController extends NgsSubscriber {
         this.componentRef = this.viewContainerRef.createComponent(componentType, { injector: myInjector });
         this.componentRef.changeDetectorRef?.detectChanges();
         this.changeDetectorRef?.markForCheck();
-        this.parentVisibility.next(true);
     }
     detach() {
-        this.parentVisibility.next(false);
         this.componentRef?.destroy();
+        this.componentRef = undefined;
         this.changeDetectorRef?.markForCheck();
     }
 }
@@ -563,7 +966,8 @@ class NgsFormsFormItemDirective {
     /** Form array that the item's control is added to. */
     formArray;
     /**
-     * Index of the item inside a form array row, provided to children as `NGS_FORMS_ITEM_INDEX`.
+     * Index of the item inside a form array row, provided to children as `NGS_FORMS_ITEM_INDEX`. When it is set, the
+     * `ngs-form-group` is also provided to children as `NGS_FORMS_ARRAY_ROW`.
      */
     index;
     controller;
@@ -571,7 +975,24 @@ class NgsFormsFormItemDirective {
     injector = inject(Injector);
     changeDetectorRef = inject(ChangeDetectorRef);
     formComponentRegistryService = inject(NgsFormsComponentRegistryService);
+    initialized = false;
     ngOnInit() {
+        this.initialized = true;
+        this.build();
+    }
+    ngOnChanges(changes) {
+        if (!this.initialized) {
+            return;
+        }
+        // A new item, group or array means a different control, so the component is rebuilt. An index change on its own
+        // keeps the component: the row it belongs to is still the same, and `NGS_FORMS_ARRAY_ROW` follows it.
+        if (changes['itemData'] || changes['formGroup'] || changes['formArray']) {
+            this.controller?.destroy();
+            this.controller = undefined;
+            this.build();
+        }
+    }
+    build() {
         if (!this.itemData) {
             return console.error('Form item without form data');
         }
@@ -582,13 +1003,13 @@ class NgsFormsFormItemDirective {
         if (this.formGroup) {
             addRemoveFn = NgsFormsFormControlAddRemoveFunctions.formGroup(this.formGroup);
         }
-        this.controller = new NgsFormItemController(this.injector, this.viewContainerRef, this.itemData, addRemoveFn, this.index, this.changeDetectorRef);
+        this.controller = new NgsFormItemController(this.injector, this.viewContainerRef, this.itemData, addRemoveFn, this.index, this.changeDetectorRef, this.index !== undefined ? this.formGroup : undefined);
     }
     ngOnDestroy() {
         this.controller?.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsFormItemDirective, isStandalone: true, selector: "[ngs-form-item]", inputs: { itemData: ["ngs-form-item", "itemData"], formGroup: ["ngs-form-group", "formGroup"], formArray: ["ngs-form-array", "formArray"], index: ["ngs-form-index", "index"] }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.19", type: NgsFormsFormItemDirective, isStandalone: true, selector: "[ngs-form-item]", inputs: { itemData: ["ngs-form-item", "itemData"], formGroup: ["ngs-form-group", "formGroup"], formArray: ["ngs-form-array", "formArray"], index: ["ngs-form-index", "index"] }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormItemDirective, decorators: [{
             type: Directive,
@@ -633,6 +1054,9 @@ class NgsFormComponent {
     constructor() {
         this.ngsFormsService.setInternalService(this.ngsInternalFormsService);
     }
+    ngOnDestroy() {
+        this.ngsFormsService.clearInternalService(this.ngsInternalFormsService);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormComponent, isStandalone: true, selector: "ngs-form", providers: [NgsFormsInternalService], ngImport: i0, template: "<!-- Tracking by form group re-creates the tree whenever setFormConfig() is called again, since each call creates a new group. -->\n@for (entry of rendered(); track entry.group) {\n  <ng-container [ngs-form-group]=\"entry.group\" [ngs-form-item]=\"entry.root\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -754,8 +1178,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class NgsFormsFormArrayInternalService {
     config = inject(NGS_FORMS_ITEM_DATA).config;
     formArray = new UntypedFormArray([]);
+    formsInternalService = inject(NgsFormsInternalService, { optional: true });
     /** Emits after a row is added or removed. */
     itemsChanged = new Subject();
+    /** Emits the index of a row right after it is removed. */
+    rowRemoved = new Subject();
     constructor() {
         if (this.config.initialItemCount) {
             for (let i = 0; i < this.config.initialItemCount; i++) {
@@ -764,16 +1191,21 @@ class NgsFormsFormArrayInternalService {
         }
     }
     ngOnDestroy() {
+        this.itemsChanged.complete();
+        this.rowRemoved.complete();
     }
     /** Removes the row at `index`, unless that would go below `minItems`. */
     removeAt(index) {
         if (this.config?.minItems && this.formArray.controls.length <= this.config.minItems) {
             return;
         }
-        if (!this.formArray.controls.length) {
+        if (index < 0 || index >= this.formArray.controls.length) {
             return;
         }
+        // Server errors for rows are matched by index, so they are cleared once the rows move.
+        this.formsInternalService?.serverErrors?.clear();
         this.formArray.removeAt(index);
+        this.rowRemoved.next(index);
         this.itemsChanged.next();
     }
     /** Appends an empty row, unless the array already has `maxItems` rows. */
@@ -781,6 +1213,7 @@ class NgsFormsFormArrayInternalService {
         if (this.config?.maxItems && this.formArray.controls.length >= this.config.maxItems) {
             return;
         }
+        this.formsInternalService?.serverErrors?.clear();
         this.formArray.push(new UntypedFormGroup({}));
         this.itemsChanged.next();
     }
@@ -859,10 +1292,33 @@ class NgsFormsFormArrayListComponent extends NgsFormsBaseClassFormComponent {
     internalArrayService = inject(NgsFormsFormArrayInternalService);
     myFormArray = this.internalArrayService.formArray;
     changeDetectorRef = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    injector = inject(Injector);
     ngOnInit() {
         this.subscribe(this.internalArrayService.itemsChanged, () => {
             this.changeDetectorRef.markForCheck();
         });
+        this.subscribe(this.internalArrayService.rowRemoved, (index) => this.restoreFocusAfterRemove(index));
+    }
+    /**
+     * When the focused element (usually the row's Remove button) was removed with its row, moves focus to the
+     * same kind of control in the row that took its place, so keyboard users are not sent back to the top of the page.
+     */
+    restoreFocusAfterRemove(index) {
+        afterNextRender(() => {
+            const active = document.activeElement;
+            if (active && active !== document.body) {
+                return;
+            }
+            const host = this.elementRef.nativeElement;
+            const rows = Array.from(host.querySelectorAll(':scope > [data-index]'));
+            const row = rows[Math.min(index, rows.length - 1)];
+            const focusable = 'button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
+            const target = row?.querySelector('ngs-forms-form-array-remove-item button:not([disabled])') ??
+                row?.querySelector(focusable) ??
+                host.closest('ngs-forms-form-array')?.querySelector(focusable);
+            target?.focus();
+        }, { injector: this.injector });
     }
     /** Creates a `form-array-list` item. */
     static create(config) {
@@ -894,8 +1350,26 @@ class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponen
     internalArrayService = inject(NgsFormsFormArrayInternalService);
     elementRef = inject(ElementRef);
     indexFromDi = inject(NGS_FORMS_ITEM_INDEX, { optional: true });
-    /** Index of the row this button belongs to. */
+    row = inject(NGS_FORMS_ARRAY_ROW, { optional: true });
+    changeDetectorRef = inject(ChangeDetectorRef);
+    /** Accessible name of the button, from `ariaLabel` or `${buttonText} item ${index + 1}`. */
+    get ariaLabel() {
+        const index = this.myIndex;
+        const label = this.config.ariaLabel;
+        if (typeof label === 'function')
+            return label(index);
+        if (label)
+            return label;
+        return `${this.config.buttonText || 'Remove'} item ${index + 1}`;
+    }
+    /** Current index of the row this button belongs to. */
     get myIndex() {
+        if (this.row) {
+            const index = this.internalArrayService.formArray.controls.indexOf(this.row);
+            if (index >= 0) {
+                return index;
+            }
+        }
         if (this.indexFromDi !== null && this.indexFromDi !== undefined) {
             return this.indexFromDi;
         }
@@ -912,6 +1386,10 @@ class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponen
     constructor() {
         super();
     }
+    ngOnInit() {
+        // The row's position changes when earlier rows are removed, which changes the default accessible name.
+        this.subscribe(this.internalArrayService.itemsChanged, () => this.changeDetectorRef.markForCheck());
+    }
     /** Creates a `form-array-remove-item` item. */
     static create(config) {
         return {
@@ -924,11 +1402,11 @@ class NgsFormsFormArrayRemoveItemComponent extends NgsFormsBaseClassFormComponen
         this.internalArrayService.removeAt(this.myIndex);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayRemoveItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayRemoveItemComponent, isStandalone: true, selector: "ngs-forms-form-array-remove-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormArrayRemoveItemComponent, isStandalone: true, selector: "ngs-forms-form-array-remove-item", usesInheritance: true, ngImport: i0, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  [attr.aria-label]=\"ariaLabel\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormArrayRemoveItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-form-array-remove-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n</button>\n" }]
+            args: [{ selector: 'ngs-forms-form-array-remove-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"removeItem()\"\n  [class]=\"config.buttonClass || 'btn btn-outline-danger btn-sm'\"\n  [attr.aria-label]=\"ariaLabel\"\n  type=\"button\">\n  @if (config.buttonIcon) {\n    <i [class]=\"config.buttonIcon\" aria-hidden=\"true\"></i>\n  }\n  {{ config.buttonText || 'Remove' }}\n</button>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -963,6 +1441,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             args: [{ selector: 'ngs-form-component-text-div', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"{{ config.classes }}\">{{ config.text }}</div>\n" }]
         }] });
 
+;
+
 /**
  * Renders an HTML string inside the form. The HTML is passed through Angular's sanitizer.
  *
@@ -996,8 +1476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             args: [{ selector: 'ngs-form-component-html-content', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [innerHTML]=\"html\"></div>\n" }]
         }], ctorParameters: () => [] });
 
+/** @internal */
 const sectionConfigDefaults = {
     titleClass: 'h3',
+    headingLevel: 3,
     subtitleClass: 'lead',
 };
 
@@ -1006,10 +1488,13 @@ const sectionConfigDefaults = {
  * parent group.
  *
  * @remarks Registry key: `section`. Config: `title`, `subtitle`, `titleClass` (default `h3`),
- * `subtitleClass` (default `lead`) and `items`.
+ * `headingLevel` (default 3), `subtitleClass` (default `lead`) and `items`. The section is exposed to assistive
+ * technology as a group named by its title.
  */
 class NgsFormsFormSectionComponent extends NgsFormsBaseClassItemsContainerBase {
     static key = 'section';
+    /** Element id of the title, used to name the section's group. */
+    titleId = `${this.itemData.uuid || v4()}-section-title`;
     /** Creates a `section` item. */
     static create(config) {
         return {
@@ -1022,11 +1507,11 @@ class NgsFormsFormSectionComponent extends NgsFormsBaseClassItemsContainerBase {
         this.config = ngsDefaults(this.config, sectionConfigDefaults);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormSectionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormSectionComponent, isStandalone: true, selector: "ngs-forms-form-section", usesInheritance: true, ngImport: i0, template: "<div class=\"form-section\">\n  <div class=\"form-section-title {{config.titleClass}}\">{{ config.title }}</div>\n  @if (config.subtitle) {\n    <div class=\"form-section-subtitle {{config.subtitleClass}}\">{{ config.subtitle }}</div>\n  }\n  @if (config.items.length) {\n    <div class=\"form-section-items\">\n      @for (item of config.items; track item.uuid) {\n        <ng-container [ngs-form-item]=\"item\"></ng-container>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NgsFormsFormSectionComponent, isStandalone: true, selector: "ngs-forms-form-section", usesInheritance: true, ngImport: i0, template: "<div class=\"form-section\" role=\"group\" [attr.aria-labelledby]=\"titleId\">\n  <div class=\"form-section-title {{config.titleClass}}\" role=\"heading\" [attr.aria-level]=\"config.headingLevel\" [id]=\"titleId\">{{ config.title }}</div>\n  @if (config.subtitle) {\n    <div class=\"form-section-subtitle {{config.subtitleClass}}\">{{ config.subtitle }}</div>\n  }\n  @if (config.items.length) {\n    <div class=\"form-section-items\">\n      @for (item of config.items; track item.uuid) {\n        <ng-container [ngs-form-item]=\"item\"></ng-container>\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgsFormsFormItemDirective, selector: "[ngs-form-item]", inputs: ["ngs-form-item", "ngs-form-group", "ngs-form-array", "ngs-form-index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NgsFormsFormSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngs-forms-form-section', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-section\">\n  <div class=\"form-section-title {{config.titleClass}}\">{{ config.title }}</div>\n  @if (config.subtitle) {\n    <div class=\"form-section-subtitle {{config.subtitleClass}}\">{{ config.subtitle }}</div>\n  }\n  @if (config.items.length) {\n    <div class=\"form-section-items\">\n      @for (item of config.items; track item.uuid) {\n        <ng-container [ngs-form-item]=\"item\"></ng-container>\n      }\n    </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'ngs-forms-form-section', imports: [NgsFormsFormItemDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-section\" role=\"group\" [attr.aria-labelledby]=\"titleId\">\n  <div class=\"form-section-title {{config.titleClass}}\" role=\"heading\" [attr.aria-level]=\"config.headingLevel\" [id]=\"titleId\">{{ config.title }}</div>\n  @if (config.subtitle) {\n    <div class=\"form-section-subtitle {{config.subtitleClass}}\">{{ config.subtitle }}</div>\n  }\n  @if (config.items.length) {\n    <div class=\"form-section-items\">\n      @for (item of config.items; track item.uuid) {\n        <ng-container [ngs-form-item]=\"item\"></ng-container>\n      }\n    </div>\n  }\n</div>\n" }]
         }] });
 
 // --
@@ -1066,5 +1551,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NGS_FORMS_CONTROL_ADD_REMOVE_FN, NGS_FORMS_ITEM_DATA, NGS_FORMS_ITEM_INDEX, NgsFormComponent, NgsFormsBaseClassFormComponent, NgsFormsBaseClassFormInputComponent, NgsFormsBaseClassFormItemInputWithOptionsComponent, NgsFormsBaseClassItemsContainerBase, NgsFormsColumnComponent, NgsFormsComponentRegistryService, NgsFormsCoreModule, NgsFormsFormArrayAddItemComponent, NgsFormsFormArrayContainerComponent, NgsFormsFormArrayInternalService, NgsFormsFormArrayListComponent, NgsFormsFormArrayRemoveItemComponent, NgsFormsFormControlAddRemoveFunctions, NgsFormsFormGroupComponent, NgsFormsFormItemDirective, NgsFormsFormItemWithVisibleAndValidatorsBase, NgsFormsFormSectionComponent, NgsFormsHtmlContentComponent, NgsFormsInternalService, NgsFormsRowComponent, NgsFormsService, NgsFormsTextDivComponent, NgsSubscriber, ngsDefaults };
+export { NGS_FORMS_ARRAY_ROW, NGS_FORMS_CONTROL_ADD_REMOVE_FN, NGS_FORMS_ITEM_DATA, NGS_FORMS_ITEM_INDEX, NGS_FORMS_SERVER_ERROR, NgsFormComponent, NgsFormsBaseClassFormComponent, NgsFormsBaseClassFormInputComponent, NgsFormsBaseClassFormItemInputWithOptionsComponent, NgsFormsBaseClassItemsContainerBase, NgsFormsColumnComponent, NgsFormsComponentRegistryService, NgsFormsCoreModule, NgsFormsFormArrayAddItemComponent, NgsFormsFormArrayContainerComponent, NgsFormsFormArrayInternalService, NgsFormsFormArrayListComponent, NgsFormsFormArrayRemoveItemComponent, NgsFormsFormControlAddRemoveFunctions, NgsFormsFormGroupComponent, NgsFormsFormItemDirective, NgsFormsFormItemWithVisibleAndValidatorsBase, NgsFormsFormSectionComponent, NgsFormsHtmlContentComponent, NgsFormsInternalService, NgsFormsRowComponent, NgsFormsServerErrorRegistry, NgsFormsService, NgsFormsTextDivComponent, NgsSubscriber, constructServerErrorMessageObject, ngsDefaults, sectionConfigDefaults };
 //# sourceMappingURL=ng-simplicity-forms-core.mjs.map