![Cover image for Two-way bind a Signal Input object value with [(ngModel)]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5xyuwcur9fope571neh9.png)
Recently, I encountered this challenge... Refactor a form component to Angular Signals.
The old form component works like this:
The form data c...
For further actions, you may consider blocking this person and/or reporting abuse
Just a question, but how is this better than the FormBuilder? I don’t see the comparison in this article.
Reactive Forms are indeed not covered in the blog post, the focus is mutating the form data with ngModel which is only available in Template Driven Forms.
But still, I was curious what the setup would look like with Reactive Forms: stackblitz.com/edit/stackblitz-sta...
I believe that you have to use
effectto update the form value withFormGroup.setValue.Yeah that’s cool. I just think opening with the fact this is about Template Driven forms would have avoided the confusion. :)
Probably because it's a separate topic and it's a matter of opinion. Template-driven forms are much simpler and straightforward. Reactive forms are more robust and manageable. You do you, basically.
We try to avoid Reactive Forms as much as possible.
Too much boilerplate for almost no gain.
Template Forms are Reactive Forms under the hood. So you get almost the same functionality.
Prefer Template-Driven Forms | Ward Bell | ng-conf 2021
I will watch the video later today, however while I’m not a super user of Angular I find the order that ReactiveForms FormGroups brings is where I appreciate it more. Having to manage individual fields feels messy to me when working on larger input systems - especially delving into Angular Material and Steppers but I’m more a PoC person :)
Yup see my response about opening with it being about template driven forms above.
Signals are not an improvement here. They make thinks more complicated and require more code.
All things considered I think linkedSignal is a better option. I don't like opting out of signals and like @oz mentioned not everything can be cloned.
Some of the boilerplate can be reduced with a directive and a model input:
stackblitz.com/edit/stackblitz-sta...
Is there any way to work the new "model signal" into the mix? I guess maybe not since you're looking to work with properties of an object?
You could replace the user input and the save output with Input
model.Input model is meant to sync data between child and parent component and vice versa: angular.dev/guide/components/input...
The challenges regarding the usage of [(ngModel)] will be the same also with Input model. I assume that you can apply the same solutions from the blog post.
Great explanation
Some things just can not be cloned (because of circular references, functions inside, or links to DOM nodes). FormGroup, FormControl, for example.
Option with linkedSignal is the way to go.
The cloning is restricted to the form data (the user Object) which is manipulated with ngModel.