Using Signal Store and Signal Forms

[fezix]

How do I use Signal Store with Signal Forms? Ive tried:

export class BasketCheckoutMarriageData {
  basketCheckoutStore = inject(BasketCheckoutStore);

  loginForm = form(this.basketCheckoutStore.marriageDataModel);
}

but I get error:

TS2345: Argument of type DeepSignal<MarriageData> is not assignable to parameter of type WritableSignal<MarriageData>
Type DeepSignal<MarriageData> is missing the following properties from type WritableSignal<MarriageData>: set, update, asReadonly, [ɵWRITABLE_SIGNAL]

[rainerhahnekamp]

Well, that doesn’t work because the signal cannot be updated outside the SignalStore. You can makes linkedSignal in the component instead.

[fezix]

Can you provide a minimal example how to sync singal form with signal store?

[JelleBruisten]

one possiblity would be the use withProps and create and signalForm based on some other value signal that is not created by withState?

[JelleBruisten]

First one looks more cleaner to me, what you think?

[rainerhahnekamp]

Since the final name of the form property is the key, I’d also go with the first one

[bstaley]

Just a question on route 1. Is the copy a shallow copy? If you have more complex state, would the linkedSignal still try to use the state's references for a prop like user.address[0].city?

[rainerhahnekamp]

@bstaley all the signal changes are immutable. so although you might have same object references in nested properties, they will replaced in the linkedSignal but not in the original.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject, signal, linkedSignal } from '@angular/core';
import { Field, form } from '@angular/forms/signals';

@Component({
  selector: 'app-root',
  template: `<input [field]="userForm.address.street" />
  <p>{{user().address.street}}</p>
  `,
  imports: [Field],
})
export class App {
  readonly user = signal({
    name: 'John',
    address: {
      street: 'Main Street',
      nr: '4',
    },
  });

  readonly userForm = form(linkedSignal(this.user));
}

bootstrapApplication(App);

[bstaley]

@rainerhahnekamp thanks for that clarification!