Тёмный

SIGNALS can make Angular "REACTIVE" forms more reactive 

Joshua Morony
Подписаться 74 тыс.
Просмотров 14 тыс.
50% 1

My Angular course: angularstart.com/
ReactiveForms in Angular are not actually all that reactive - unless we take a particularly loose definition of the word "reactive" to just mean that some kind of reactive mechanism like observables are used.
Most typical usage of ReactiveForms in Angular involves using a lot of imperative code and manual subscribes. This video explores using signalSlice as a way to make using ReactiveForms more reactive and declarative.
Source code: github.com/joshuamorony/signa...
More on signalSlice: • I tried to build my dr...
Get weekly content and tips exclusive to my newsletter: mobirony.ck.page/4a331b9076
Want to build mobile apps with Angular?: ionicstart.com
0:00 Introduction
0:54 Challenges with ReactiveForms
1:20 Using signalSlice for ReactiveForms
3:05 emitEvent
3:31 Comparison
4:12 Still imperative
4:51 The ultimate approach?
#angular #signals
- More tutorials: modernangular.com
- Follow me on Twitter: / joshuamorony

Опубликовано:

 

10 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 32   
@JoshuaMorony
@JoshuaMorony 4 месяца назад
If you like Angular stuff, and want more Angular stuff, join the newsletter: mobirony.ck.page/4a331b9076
@julienwickramatunga7338
@julienwickramatunga7338 4 месяца назад
It's very interesting to see how your approach evolves from a video to another. It teaches us how you analyse a given problem and find a suitable solution, while keeping in mind what could be improved. Thank you for your dedication 👍
@JoshuaMorony
@JoshuaMorony 4 месяца назад
Glad you're finding them useful!
@WanderingCrow
@WanderingCrow 4 месяца назад
Forms are still a headache for me to this day. I'm glad to know that signals could potentially help alleviate some of the annoyance... Though I'm starting more and more to look towards template-driven forms, which seem to scale better than what people tend to say, I feel
@tarquin161234
@tarquin161234 6 дней назад
What are your problems with reactive forms?
@nomiscph
@nomiscph 4 месяца назад
Personal opinion this does not really feel cleaner :)
@hefesto706
@hefesto706 4 месяца назад
Thanks for the content, are you planning any update of your angular course soon?
@JoshuaMorony
@JoshuaMorony 4 месяца назад
The plan currently is to wait for signal based components and then I'll update everything to that, but mostly there isn't much to update just the extra things that came after the v17 release
@hefesto706
@hefesto706 4 месяца назад
@@JoshuaMorony youre right, its better to wait, thank you for everything! I wish you had more angular project oriented courses 😉
@larshanisch
@larshanisch 3 месяца назад
Instead of adding/removing validators on a control I would write one that take that other control as an input and react to changes on that (haven't tried this particular case). Or one could add a custom validator to the FormGroup. Then you can remove some imperative piece. Thanks for your videos!
@goetzrobin
@goetzrobin 4 месяца назад
Great video Josh! You would love the work Tim Deschryver has done with ng-signal-forms! It's built entirely on signals and ngModel, which means you get all what's beautiful this added layer on top of reactive form, without having to deal with reactive forms :D Validators that are disabled/enabled based on form state, multi page forms driven by a single signal form, debounced inputs, async validation, etc. Would love for you to give it a try and to hear your thoughts on it!
@JoshuaMorony
@JoshuaMorony 4 месяца назад
Hey thanks Robin, definitely keen to dive into some more ideas here so I'll check it out for sure
@sulaimantriarjo8097
@sulaimantriarjo8097 4 месяца назад
way to go Josh, I am still confused with the effect tho. does it execute base on the squence we declare in it?
@JoshuaMorony
@JoshuaMorony 4 месяца назад
Any effect will execute any time any of the signals it references change (and also once initially which is why the init effect works)
@zertyfield
@zertyfield 4 месяца назад
What do you think of Brecht Billiets approach using Signals and template driven forms instead?
@JoshuaMorony
@JoshuaMorony 4 месяца назад
I've only briefly seen bits and pieces so not enough to comment, and in general I just haven't given template driven forms a proper go yet - I've felt for a long time now that I probably would like template driven forms, but the opportunity to try it out properly just hasn't eventuated
@WilliamWoodAZ
@WilliamWoodAZ 3 месяца назад
I really love this approach. I do have a question/challenge. How can we use this approach and patch a some data that’s dynamic? For example let’s say you’ve got a form that lets you pick a make and model of a car and on load you want to auto select the last options that the user selected. Also, on change of make you have to get the models of that make from the backend & you need to set the model to null on that change because it wouldn’t make sense to have a “Honda Mustang”. Can something like this with dependent properties and loads be done with signal slice? My past implementations all inevitably have me using afterviewinit and using event emit: true in my patch statement. Also requiring me to check my on change and see if the value of make went from null to a value and if so don’t null model. Hope this makes sense.
@JoshuaMorony
@JoshuaMorony 3 месяца назад
At a glance I would think this should be fine - auto applying some previous selected options would likely look similar to what I have in the video, maybe disable the form in the init effect, and load the necessary data as a source + have a side effect via tap to set the data. Then for reacting to changes you might have something like my "requireExplanation" effect, you have all of your form control values available as signals via the selectors, so you can create an effect that runs whenever a particular control value changes - from that effect you should be able to trigger an "actionSource" which can make the call to load the models for that make, and potentially have an "actionEffect" that runs when that "actionSource" emits to handle setting the data in the form + resetting the model back to null. This is all off the top of my head of course so it might require some playing around with - if you do end up trying it and run into any issues feel free to let me know.
@koempf
@koempf 4 месяца назад
should we not do this with the new NgrxSignalStore ?
@AlainBoudard
@AlainBoudard 4 месяца назад
I like the approach here. I also feel like there's work to be done to reach a state of things that would be beginner friendly, or if not beginner, not a huge expert. I see the current state of Angular like a transition, and I enjoy these experiments. Thanks Josh
@JoshuaMorony
@JoshuaMorony 4 месяца назад
Agreed and as I mentioned in another comment I don't really see this particular approach as a solution to forms generally, I think a more targeted/specific solution will be better. But for people who are using signalSlice or some approach that works similarly, this could be a nice way to integrate into existing patterns (and then maybe when better patterns come along, state management approaches like signalSlice might just integrate into those instead)
@robrabbit8288
@robrabbit8288 4 месяца назад
If you didn't know: In generel you can wrap any code which sets signals with the 'untracked' function.
@JoshuaMorony
@JoshuaMorony 4 месяца назад
yes thanks, I'll have try and see if that works here instead of disabling emitEvent (not actually sure since the signal set is being triggered by the valueChanges observable updating)
@lertis_m
@lertis_m 4 месяца назад
Is that gonna work with ControlValueAccesor?
@wolfisraging
@wolfisraging 4 месяца назад
Google, please considering hiring Joshua fulltime!
@markojozic3944
@markojozic3944 4 месяца назад
That's all cool and interesting but I think you miss the point of reactive forms. You kinda abstract the form-submission away and let your state manage code which by nature does not need declarative behaviour ... your form-submission is always imperative Now what you get as a response you might want react to declarative but I don't see how you make this easier because you basically just smash one abstraction on top of another one and now developers have to deal with both ... reactive forms already manage the state of your form and its formcontrols declarative so I don't really see the merit in this tool except that it is cool
@JoshuaMorony
@JoshuaMorony 4 месяца назад
I don't have much to add on outside of what's in the video, but I do find value in having the signalSlice handle all sources of state and being able to derive/react to whatever I need through that - the form submission being a good example of the way it can make things more declarative. As I mentioned though I don't think this is the best abstraction that we can land on specifically for managing forms - signalSlice serves other purposes and happens to integrate in a reasonably convenient way with reactive forms without needing to bring in some other abstraction. I wouldn't advocate for signalSlice as a way to manage forms specifically if you aren't already using it for state management.
@ratg97
@ratg97 4 месяца назад
i think we dont need to use signals on forms
@Framoio
@Framoio 4 месяца назад
Why?
@ratg97
@ratg97 4 месяца назад
@@Framoio is very simple and clear the reactive forms
@artavazdavagyan
@artavazdavagyan 4 месяца назад
please change your ide colors...please
@JoshuaMorony
@JoshuaMorony 4 месяца назад
I just did actually, hopefully this is more to your liking: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-H6fQB9hMUCU.html
Далее
Why Angular Signals? Write Your First Signal
14:25
Просмотров 6 тыс.
Reactive Form Validation in Angular - Do It Right
13:08
ngTemplateOutlet is WAY more useful than I realised
16:36
Reactive Forms  - The Basics
15:48
Просмотров 254 тыс.
The easier way to code Angular apps
9:54
Просмотров 64 тыс.
Svelte 5 is a beast, but is it worth switching?
37:55
Deferrable Views - New Feature in Angular 17
15:31
Просмотров 17 тыс.
The mindset you need for a DECLARATIVE code refactor
7:56