CODEWITHSUNDEEP
angularangular-formsangular-signals
T. Jami
T. Jami

Reputation: 1016

How to update the root signal in a nested Angular signal

The initial issue I had was me having a signal with an Object, such as:

myNestedSignal = signal({
    name: "Alice",
    address: {
        city: "Wonderland",
        zip: 12345
    })
})

I wanted to create template driven forms in Angular with two way bindings. I also had another computed signal which was tracking the changes of myNestedSignal. Binding the children would actually change the values, but it wont trigger a change event.

So I thought, I should create a nested signal. Something like this:

myNestedSignal = signal({
    name: signal("Alice"),
    address: signal({
        city: signal("Wonderland"),
        zip: signal(12345)
    })
})

But this still didn't solve my issue.

Whenever I update a value of a child signal only that child signal is receiving a change event. The parent signals are not triggered. Which is the way signals work.

I do still want to manually trigger changes to the parents of the child. For instance:

if zip is updated, then address and myNestedSignal should be triggered as well. In Addition to that city and name shouldn't be triggered.

Technically I could create a computedSignal and invoke every single Signal in it, this would do the job. Then I could just track the computedSignal, that would be a hack tho, which I am not really in favor of.

I am out of ideas and I still can't figure out a way to achieve this case. I tried to create a function which turns a signal of object to a nested signal using Proxy and hoped I could just add an update event in the handler event. But that didn't work out either.

I do know that you could use ngModelChange to then manually update the signal, but I am still looking for a way to avoid that.

Any ideas on how to achieve this?

Upvotes: 2

Views: 131

Answers (1)

Naren Murali
Naren Murali

Reputation: 56600

As of 11/19/2024, Angular signals for forms is still not ready, you should opt for traditional method.

Signal updates do not propagate to the parent signal, also there is no need for it to propagate.

Would recommend Reactive forms or Template Driven Forms.

You can still use Template Driven Forms with each [(ngModel)]="someModelSignal() having it's own model signal. But there should be no nesting.

It may be possible but the code to create this is a lot of overhead and you will have to refactor it anyway when angular signal for forms arrives, hence I am highlighting this in my answer.

Upvotes: 2

Related Questions