How are people using signalStore with reactive forms?

[caboodal]

I'm trying to settle on a pattern to use with my reactive forms and signalStore as my state management tool. I watched this video by Josh Morony signal slice which seems to suggest a pattern which could work but using signalStore as opposed to his own signalSlice utility.

Has anybody got any thoughts on this?

I've added my FormGroup into the signalStore state which seems to make most sense as it keeps the bulk of the business logic out of the component and in the store however, it is a bit of faff loading the control values in and out. However, that could be much less of an issue using Josh's approach of managing things with the whole form value not individual controls.

I'm going to have another crack now at setting my form up using signalStore with the FormGroup inside the store and trying to work with the form as a whole when it changes etc. and report back.

[rainerhahnekamp]

Yeah, Joshua and Mike Pearson are known for exploring declarative patterns in Angular.

I think it all comes down to who manages the logic of your form. For most forms, I only have to apply a bunch of validators. They are naturally assigned to the FormControl or FormGroup, and there's my logic.
In that case, the Signal Store might load the initial data, bit I just get get it from there and pass it on to formGroup.setValue or so. Then the form takes over. Once my user submits, the event handler passes the form data back to the Signal Store.

Now if you want to be quite reactive, you could pass valueChanges to a Signal Store's method which was created by rxMethod but in that version the formGroup is still outside of the Signal Store.

I've seen some experiments with passing the formGroup to the Signal Store but I didn't like them to be honest.

What you should also consider: We are expecting a Signal upgrade for the reactive forms in the next few months. I hope that it becomes much easier then.

[caboodal]

Hi @rainerhahnekamp

I feel like you are singlehandedly helping me through this challenging yet exciting time in Angular development!!

I fear your final comment is going to be the key to this which makes developing Angular apps very challenging at the moment as things are changing so fast.

I'm leaning towards the pattern of including the FormGroup within the state as it seems to allow the store to encapsulate almost all of the form logic. I left the goBack() method in the component because it seemed less business logic related and purely UI. Obviously, I have reservations due to your own comment about disliking this approach and what might be released in the coming months. As this is a completely green field startup project the chances are any new Angular feature introductions will need to be retrospectively applied anyway.

Just for discussion and critical review by any other interested parties I have included my code where I have included the FormGroup in the signalStore; -

Signal Store

const initialState: EditTenantState = {
    isWorking: false,
    forms: {
        tenant: new FormGroup({
            name: new FormControl<string>('', {
                validators: [
                Validators.required,
                Validators.maxLength(SharedColumnLengths.Name)]
            }),
        }),
    },
};

export const EditTenantStore = signalStore(
    withState(initialState),
    withMethods(
        (
            store,
            tenantApiService = inject(TenantApiService),
            errorHandlerService = inject(ErrorHandlerService),
            messageService = inject(MessageService),
            authStore = inject(AuthStore),
            appStore = inject(AppStore)
        ) => ({
            fetch: async () => {
                try {
                    appStore.setPageLoading(true);
                    patchState(store, {isWorking: true});

                    const response = await tenantApiService.fetch();

                    store.forms.tenant().get('name')?.setValue(response.name);
                    store.forms
                        .tenant()
                        .get('name')
                        ?.addAsyncValidators([
                            isTenantNameUniqueValidator(tenantApiService),
                        ]);
                } catch (error: any) {
                    await errorHandlerService.raise(
                        'EditTenantStore.fetch',
                        error);
                } finally {
                    patchState(store, {isWorking: false});
                    appStore.setPageLoading(false);
                }
            },
            update: async () => {
                try {
                    if (store.isWorking() || store.forms.tenant().invalid) {
                        return;
                    }

                    patchState(store, {isWorking: true});

                    const request: UpdateTenantRequest = store.forms
                        .tenant()
                        .value;

                    await tenantApiService.update(request);

                    authStore.setSelectedTenantName(request.name);

                    messageService.add({
                        key: 'app-toast',
                        severity: 'info',
                        summary: $localize`Tenant Details`,
                        detail: $localize`The tenant details were successfully updated.`,
                    });
                } catch (error: any) {
                    await errorHandlerService.raise(
                        'EditTenantStore.update',
                        error);
                } finally {
                    patchState(store, {
                        isWorking: false,
                    });
                }
            },
            isFormControlInvalid: (controlName: string, error: string): boolean => {
                const control = store.forms.tenant().get(controlName);
                if (!control) {
                    return false;
                }
                return control?.hasError(error) ?? false;
            }
        })
    )
);

Component

@Component({
    selector: 'app-edit-tenant',
    standalone: true,
    imports: [
        InputTextModule,
        ButtonModule,
        FormsModule,
        ReactiveFormsModule,
        NgIf,
    ],
    providers: [EditTenantStore],
    templateUrl: './edit-tenant.component.html',
})
export class EditTenantComponent extends PageComponent implements OnInit {
    public store = inject(EditTenantStore);
    private router = inject(Router);

    public async ngOnInit(): Promise<void> {
        await this.store.fetch();
    }

    public async goBack(): Promise<void> {
        await this.router.navigate(['/'], {
            replaceUrl: true,
        });
    }
}

Template

<div class="card p-fluid m-0">
    <h4 i18n>Tenant</h4>
    <div class="flex flex-col gap-4">
            <form [formGroup]="store.forms.tenant()">
                <div class="field">
                    <label i18n for="name">Name</label>
                    <input
                        pInputText
                        formControlName="name"
                        id="name"
                        type="text"
                        [maxlength]="SharedColumnLengths.Name"
                    />
                    <small
                        *ngIf="store.isFormControlInvalid('name', 'required')"
                        class="ng-dirty ng-invalid"
                        i18n
                        ><strong>Name</strong> is required.</small
                    >
                    <small
                        *ngIf="store.isFormControlInvalid('name', 'maxlength')"
                        class="ng-dirty ng-invalid"
                        i18n
                        ><strong>Name</strong> has a maximum length of
                        {{ SharedColumnLengths.Email }} characters.</small
                    >
                    <small
                        *ngIf="store.isFormControlInvalid('name', 'isNameUnique')"
                        class="ng-dirty ng-invalid"
                        i18n
                        ><strong>Name</strong> already exists.</small
                    >
                </div>
            </form>
            <div class="flex gap-4">
                <p-button label="Back" (click)="goBack()" />
                <span class="grow"></span>
                <p-button
                    label="Save"
                    severity="success"
                    [disabled]="store.isWorking()"
                    (click)="store.update()"
                />
            </div>
    </div>
</div>

[rainerhahnekamp]

Hey Andrew,

...formGroup to the Signal Store but I didn't like them to be honest

I meant that literally, like I would say, "I don't like chocolate ice cream." It doesn't mean that I wouldn't recommend it or that it is technically wrong. I don't like the style and would only use it if there is no better alternative.

As I said, my forms tend to consist of many fields along some validators, and only logic for loading and submitting.

In your case, you have more logic than just some validators. It is also a local state, and the current alternative would be to put everything back into the component, which I like even less ;)

So, in your scenario, I'd say your approach is perfectly fine 👍

[Hypenate]

I tried using it like this:

Signal Store:

export const TenantFormStore = signalStore(
  withComputed((_store, tenantsStore = inject(TenantsStore), fb = inject(NonNullableFormBuilder)) => ({
    form: computed(() => createForm(fb, tenantsStore.detail())),
  })),
  withComputed((store) => ({
    invalid: computed(() => store.form().invalid),
  })),
);

Component template:

 @let form = tenantFormStore.form();
 @let invalid = tenantFormStore.invalid();

 Invalid from Form: {{ form.invalid }}
 Invalid from Store: {{ invalid }}

But the isValid value from the store is never updated.
I tried using a DeepComputed, because it is a nested property, but that also did not solve it.

Did you overcame something like this?

[caboodal]

I've completely moved away from storing the FormGroup in the store. I create the FormGroup within the component itself and use an effect to trigger the creation. Something like the invalid flag above I would simply manage by creating a public signal on my component and update that using the FormGroup valueChanges event via an NGRX subscription.

I got really hung up on not using Observables/NGRX and it transpires that sometimes its just the easiest most suitable thing to do. Same with effects you'll see a lot about "not using them" but they perform a valuable function when used in the correct manner.

Hopefully Angular are working on a more "signally" approach to implementing ReactiveForms.