Don't use Signals with Angular Reactive Forms!
Вставка
- Опубліковано 9 лип 2024
- #angular #reactiveforms #signals
In this video, I get our form example working with Angular Reactive Forms and Signals - and we see why it is not a good idea to do this. Template driven forms are more natural fit!
Github code: github.com/thisiszoaib/angula...
Want to learn how to create a full stack application with Angular and Firebase? Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:
www.udemy.com/course/angular-...
Follow me on:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) - Наука та технологія
how about if the values are in a signal and when user clicks edit, the reactive form is populated with the data and when the form is saved, the signal is updated and an effect is triggered to save db etc? Can that be a good use?
IMO it's a lot of redundancy i.e. duplicate data structures for the same data basically. In that case, it would be better to just stick with reactive forms and make it simpler.
However, if you do want to switch to signals, then template driven forms seem like a better option.
About using an effect for saving data, its ok if we do it for non essential stuff like logging etc., but for business related forms, it would mean we'll be waiting for the response and show some notification for it which would mean updating more signals in the effect. That is advised against currently by the Angular team.
But best practices related to signals are still evolving - so who knows, maybe the concept of effects will also evolve. Currently though, the Angular team says to use signals + computed for almost everything. RxJS for async work. Effects very rarely for debugging purposes or logging...
Given that most of angular applications have various forms with input fields that use advanced features of reactive forms for validation - and considering the real issue with Signals that you mention in this video - what's practical purpose of Signals, then? In which scenarios, if not for input fields, would you use them that actually makes sense and have advantage? Especially if it means you would always have to combine them with reactive FormControls which adds complexity of having two approaches to data handling (as there's also Signals Store / State that would comete with classic NgRx Store)?
Well, signals should definitely be used with forms because as you said they're perhaps the most important part of an app. But there are also used with inputs - new signal based inputs are arriving in 17.1 and then overall state management in the app.
The forms API just needs to be better integrated with signals and we have indications that this may also be coming soon. In fact, some indications are that we may see a merging of the two form APIs into one.
But your larger qs about signals and their advantage: it is basically to have better fine grained reactivity and remove the need for zone js change detection. It might not be apparent in small apps, but for medium to large apps, will have a good performance boost.
P.S. Template driven forms are just as capable as reactive forms, and that was my point in the video i e. use signals but with template driven forms.
Reactive forms are great for quick and dirty forms, but for large apps which already have state management, we're already storing the data in state anyway, so less utility of the reactive form itself.
Could you make a video about signal model and look at the chance to apply it to reactive forms?
Signal models are basically a signal based implementation of two way data binding. That makes reactive forms redundant as well - because signal models are reactive themselves.
It's on the Angular roadmap that forms will soon provide better integration with signals - but till that happens, IMO its better to stick with template driven forms...
so the argument is that the .ts file has 2x copies of the values vs more code in .html in template driven. What about performance?
I haven't tested it out, but expect the performance to be not that big of a deal for most apps. Reactive forms are built on top of template driven forms so my guess is using just signals with them should be teeny bit faster...
Consider I have an object which is binded ngmodel the how computed works for fullname property
You mean you have an object signal with first name and last name as properties?
I agree, using signal with reactive form is definitely an overkill.
I believe Angular team will provide more signal based binding to the forms API in the next 6 months, so we can hope for better integration :)
Don't use Signals at all!
You should start using it now. Angular is adding better support with every release