@firestitch/form 18.0.34 → 18.0.36

package/fesm2022/firestitch-form.mjs

@@ -1589,11 +1589,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class FsFormDialogActionsComponent {
-    /** Leave unset inside an `fsFormContainer` to follow whether it has anything to save. */
+    /** Leave unset to follow whether the enclosing form or container has anything to save. */
     save;
     create = false;
     close = false;
-    /** Leave unset inside an `fsFormContainer` to fill in whenever Save does not apply. */
+    /** Leave unset to fill in whenever Save does not apply. */
     done;
     closeData = null;
     name;
@@ -1607,20 +1607,37 @@ class FsFormDialogActionsComponent {
     _form = this._ownDialogOnly(inject(FsFormDirective, { optional: true }));
     _cdRef = inject(ChangeDetectorRef);
     /**
-     * Inside a container these default to whether anything mounted can actually
-     * save, so a footer left as a bare `<fs-form-dialog-actions>` swaps Save for
-     * Done as tabs change without the dialog listing which tabs are savable. An
-     * explicit binding always wins, and outside a container Save stays on as it
-     * always did.
+     * Whatever owns the form set these actions act on, or null when nothing does.
+     * A container answers for every form mounted under it; failing that the
+     * enclosing form's root answers for itself and anything linked into it.
+     */
+    get _owner() {
+        return this._container || this._form?.rootForm || null;
+    }
+    /**
+     * Save and Done are one decision - whether there is anything to save - rather
+     * than two independent switches, so a bare `<fs-form-dialog-actions>` resolves
+     * it off the form set it sits in and needs no bindings at all. A footer in a
+     * container swaps Save for Done as tabs change without the dialog listing
+     * which tabs are savable, and a dialog with no form at all - a read-only one
+     * of labelled facts - gets Done, because a submit button there has nothing to
+     * submit.
+     *
+     * An explicit binding always wins. `[done]="true"` on its own means Done and
+     * only Done: turning Done on while leaving a Save beside it is never what the
+     * caller meant, and the two-flag version of this let that happen silently.
      */
     get showSave() {
-        return this.save ?? (this._container ? this._container.submits : true);
+        if (this.save !== undefined) {
+            return this.save;
+        }
+        return this.done === true ? false : this._owner?.submits ?? false;
     }
     get showDone() {
-        return this.done ?? (this._container ? !this._container.submits && !this.create : false);
+        return this.done ?? (!this.showSave && !this.create);
     }
     ngOnInit() {
-        const owner = this._container || this._form?.rootForm;
+        const owner = this._owner;
         if (owner) {
             // Track the whole set, not one form's own controls: with a form scoped to a
             // tab's fields, the actions sit outside it in the dialog footer and that
@@ -1759,6 +1776,7 @@ function messageProviderFactory() {
     return { ...ERROR_MESSAGES };
 }
 
+const resolvedPromise = Promise.resolve();
 class FsControlDirective {
     wrapperSelector;
     messageSelector;
@@ -1774,7 +1792,6 @@ class FsControlDirective {
         };
     }
     errors = [];
-    _control;
     _elementRef = inject(ElementRef);
     _renderer2 = inject(Renderer2);
     _injector = inject(Injector);
@@ -1782,19 +1799,31 @@ class FsControlDirective {
     _ngControl = inject(NgControl, { optional: true });
     _formDirective = inject(FsFormDirective, { optional: true });
     _destroy$ = new Subject();
+    _statusChanges$ = new Subject();
+    _boundControl;
     constructor() {
-        const _ngControl = this._ngControl;
-        if (_ngControl) {
-            this._control = _ngControl.control;
-        }
-        else {
+        if (!this._ngControl) {
             console.error('The element does not have a valid ngModel', this._elementRef.nativeElement);
         }
     }
+    /**
+     * Always read the control through the directive rather than caching it.
+     *
+     * NgForm.addControl() runs in a microtask and reassigns dir.control to
+     * whatever FormGroup.registerControl() returns — and registerControl() hands
+     * back the EXISTING control when the name is already taken (two fields
+     * sharing a name, or lazily created content re-registering). A control
+     * captured in the constructor is then an orphan: it never emits again, so
+     * statusChanges never fires and the validation message is never rendered.
+     */
+    get _control() {
+        return this._ngControl?.control;
+    }
     ngOnInit() {
         this._setupValidators();
     }
     ngOnDestroy() {
+        this._statusChanges$.complete();
         this._destroy$.next(null);
         this._destroy$.complete();
     }
@@ -1936,11 +1965,30 @@ class FsControlDirective {
         }
     }
     _subscribeToStatusChagnes() {
-        if (this._control) {
-            this._control.statusChanges
-                .pipe(takeUntil(this._destroy$))
-                .subscribe(this.render.bind(this));
+        // Registration is deferred to a microtask by NgForm.addControl(), so wait
+        // for it to settle before binding — otherwise we subscribe to the control
+        // that is about to be replaced.
+        resolvedPromise
+            .then(() => this._bindStatusChanges());
+    }
+    _bindStatusChanges() {
+        const control = this._control;
+        if (!control || control === this._boundControl) {
+            return;
         }
+        this._boundControl = control;
+        this._statusChanges$.next();
+        control.statusChanges
+            .pipe(takeUntil(this._statusChanges$), takeUntil(this._destroy$))
+            .subscribe(() => {
+            // The control can still be swapped out from under us (a sibling with
+            // the same name registering later), so re-bind before rendering.
+            if (this._control !== this._boundControl) {
+                this._bindStatusChanges();
+            }
+            this.render();
+        });
+        this.render();
     }
     _getWrapper(node, count = 0) {
         if (!node || count > 10) {