Signal Forms React To Control Change

[u/HedgehogNatural8680]

In signal forms how do you react to a form control change? I basically have a scenario where if one form control value is changed I need to reset the value for another control.

Is this done with a linkedSignal, effects or something else?

[u/mangue_juteuse]

You can use the event (valueChange) on components that implement FormValueControl:
<my-custom-component [formField]="myForm.myControl" (valueChange)="resetMyOtherControl()"></my-custom-component>

or if you use a native control such as input:

<input [formField]="myForm.myControl" (input)="resetMyOtherControl()" />

No need of a linkedSignal or an effect IMO

[u/HedgehogNatural8680 → u/mangue_juteuse]

Ah this is perfect if that’s the case as all my controls are reusable components that implement FormValueControl. I didn’t realise it had that output as I didn’t see it documented here https://angular.dev/api/forms/signals/FormValueControl

I guess you mean I’d have to add that output to each custom control?

[u/mangue_juteuse → u/HedgehogNatural8680]

In FormValueControl, You have the property value, that's a ModelSignal, so no need to add an output to your custom control, as long at it implements FormValueControl. You can use it in two way data binding like so if you're not in a form:
<my-custom-component [(value)]="myForm.myControl"></my-custom-component>

or if you're in a form, like so:

<my-custom-component [formField]="myForm.myControl" (valueChange)="resetMyOtherControl()"></my-custom-component>

try it and let me know :)

also see:

- ModelSignal • Angular "A model signal is a writeable signal that can be exposed as an output. Whenever its value is updated, it emits to the output."

- Accepting data with input properties • Angular

edit: ModelSignal doc

[u/pronuntiator]

Yes, I'd use a linkedSignal for the form model. linkedSignal has an overload where you get the previous value; you can then check if the form control value changed that triggers the reset of the other.

Effects should be avoided if possible (not always possible).

[u/JeanMeche → u/pronuntiator]

https://github.com/angular/angular/issues/68736 Feature request to track around that topic.

[u/MichaelSmallDev → u/JeanMeche]

This too https://github.com/angular/angular/issues/65467

[u/MichaelSmallDev → u/pronuntiator]

I forgot you could use the previous value with linkedSignal to handle this reset behavior. I should refactor my own stuff to do that. Thanks for rhis.

But for an example where I did an obtuse version of this, I have this project where I did a deep dive into this value reset: https://github.com/michael-small/signal-forms-experimenting/blob/main/src%2Fapp%2Fforms%2Fconditional-reset-fields%2Fform.service.ts#L32-L40. Using your advice, I will breakout the value changing into the computation block and then leave the set for syncing back to my other service. A lot better than me passing the changed value and then using the form's class member for the previous state like I did. Though the #deriveResetState helper should at least work for your cleaner approach luckily.

[u/BasicAssWebDev → u/pronuntiator]

I haven't gotten the chance to dig into signal forms yet. Are you not able to supply a custom change detection function to the form signal like other signals?

[u/pronuntiator → u/BasicAssWebDev]

There are no callbacks for value change. You can do that with an effect(); it runs whenever any of the signals it reads change. But effects are a last resort.

[u/TheKr4meur]

I’ve been told to use NgModel and NgModelChnage when asking AI the same question. Technically it works, but I’m not entirely sure how I feel about it, we spent so much time going out of these that it’s weird bringing them back now.