cloudnc / ngx-sub-form

Utility library for breaking down an Angular form into multiple components
https://cloudnc.github.io/ngx-sub-form
MIT License
315 stars 33 forks source link

Possible bug on manual save #291

Closed 188599 closed 1 year ago

188599 commented 1 year ago

I'm having some trouble figuring out why the form is not emitting it's value to the output$ subject after invoking manualSave$. It works as intended for anything but one specific form entry, when trying to edit it.

At the moment when manualSave$ emits, I make sure the form is valid. Also it does not seem to change states, which I checked by subscribing to formGroup.statusChanges.

This is the method I call for when attempting to submit the form.


    public async submit() {
        if (!this.form.formGroup.valid) {
            this.form.formGroup.markAllAsTouched();

            this.errorsWarning = true;

            this.sidenavContent.scrollTo({ top: 0, behavior: "smooth" });

            this.form.formGroup.statusChanges
                .pipe(
                    takeWhile(status => status !== 'VALID'),
                    take(1),
                    finalize(() => this.errorsWarning = false)
                )
                .subscribe();

            return;
        }

        if (this.form.formGroup.valid) {
            // manualSave$
            this.manualSave$$.next();

            // added this for debugging
            merge(
                this.form.controlValue$, // this one seems to emit
                this.form.formGroup.statusChanges.pipe(take(1)) // this one doest not
            )
                .pipe(tap(data => { debugger }))
                .subscribe();

            return;
        }

        await lastValueFrom(
            this.form.formGroup.statusChanges
                .pipe(
                    startWith(this.form.formGroup.status),
                    takeWhile(status => status === 'PENDING')
                )
        );

        await this.submit();
    }

I can't really find a way to properly debug the code from the library and even looking through the code I didn't find any other caveats that might be causing this issue for me.

I also tried cloning this repository and using it as a local dependency to enable proper debugging, but I'm running on some issues when trying to compile my project, due to some mismatch with angular versions that I'm not quite sure how to resolve.

Any ideas on how to proceed with this would be appreciated.

188599 commented 1 year ago

I just found ngx-sub-form.mjs on Chrome's Devtools. I'm gonna see if I can figure out the issue. I don't know how I missed that before. 🤦‍♂️

Keeping the issue open for now, will close later or add more details once I figure out the problem.

188599 commented 1 year ago

Figured out the problem.

I was just trying to submit a form without making any changes, but there's this equality check before emitting.

I guess it wouldn't make much sense to submit the form back without any value changes. I'm closing the issue.

maxime1992 commented 1 year ago

Nice debugging @188599.

You may want to follow https://github.com/cloudnc/ngx-sub-form/pull/290 and https://github.com/cloudnc/ngx-sub-form/issues/289