A trick to make your Angular Reactive Forms more... *Reactive*

Today's video is about a cool technique to make your reactive forms more "reactive". It's also a useful technique to make your apps more reactive in general.

0:00 Introduction
1:16 Imperative Form
3:07 Reactive Form
6:15 Comparison

#ionic #angular #rxjs

[ponderwonder]

Love discussion on reactive (imperative) forms.

One strategy we employ is to build our reactive view model (the state of the page and form) and then use tap to imperatively update the form based on the view model.

Then we do everything in rxjs knowing that our form will update off the back of it.

Your solution is essentially the same. It's encapsulating the imperative parts inside a reactive wrapper.

[irohwavez]

Started using NGRX ComponentStore after seeing your recent videos and ran into a snag with the forms. This video cleared it right up. Thanks!

[mawill]

Thanks for the informative video! I appreciate the level of depth you go to in this tutorial!

[TayambaMwanza]

Please make an angular specific playlist, would like to watch a lot of your angular specific vids, I see you have ionic playlist. I think stufflike this can go into just angular.

[gabriellenoxel]

About reactive programming, I think that as much your application grows, the code gets more difficult to understand. And what if you had more code logic before updating the user, it wouldn't be hard to understand, and even to other programmers maintain the code as well? I really don't know if the pros of reactive programming overcome its drawbacks, mainly on big applications and considering the know-how to achieve. But, I'm excited to watch and learn more about angular + ionic + reactive programming, great content!

[CodingAbroad]

Instead of creating a child component each time (which would cause lots of files), could we use the ngtemplateoutlet to keep all the logic in 1 place?

[SampathLokuge]

Nice! But we do not need to use `Public` with Typescript since it is `Public` by default.

[harleybussell]

One issue using this style is losing form state if the observable updates.
If the UserService sends an update the form will get recreated and loose an changes which may be what you want but not always.
In this example it may not be a big issue but could become a problem following this pattern when you using multiple observables that can fire at different times.
I've generally preferred the imperative solution as can create the form once and patch its value over time as async data comes in.

[whomi]

How would you handle a case where you need to get valueChanges from a field to do something else like changing the field mask dinamically or calling an api?

[Fedotenko]

Would this approach also work for a dynamic form that has a formarray?

[colinstringer]

Hey Josh, I have a question, but first: your videos have given me a better approach to building my Angular for which I'm very grateful!

So my question has to do with this video.
I'm building a parent component with a users$ observable that passes a users array to a child component.
In the child I have a mat-table with lots of built in functionality, but some of its changes need to be passed to the parent.
Example: the mat-table in my child component registers changes made in sorting, but the parent component needs to know about the sorting changes to send a new request to my API (through the service). What's a clean approach here? Right now I'm using the @Output function to pass a Sort object to my parent, but that feels too imperative. I'd prefer to link the stream of MatSort and the UserService together somehow, but now sure how?

[ArchiRuban]

Nice! Just wished you explained what that “else” statement was in *ngIf

[CodingAbroad]

Have you ever had a situation where you’ve used the async pipe just to trigger some logic but not to necessarily render something on screen?

I have a situation where I need to lookup some things from the url querystrings, lookup an api and then save to a cookie.

I know using async pipe is the preferred way over manually subscribing so would you still use it in this situation?

[IagoCCampos]

How do you handle erros with the async pipe on the reactive aproach?

[DhainautRaphael]

Hi Joshua,

I love your videos because you are one that make angular most attractive for me ! I use Angular at my company and sometimes i struggle with some angular concepts.
So i m watching some of your videos and i have a more clear idea how it works and which best practices we could follow to increase the quality of code.
I m super enthusiast about your topics "declarative/reactive" vs "imperative" <3

I m curious about one particular point in Angular and I would like your opinion about reactive forms versus template driven forms.
Thanks a lot for your content and hope to heard you soon about that question

[GdeVseSvobodnyeNiki]

Now i need to figure out how do i get rid of subscription to form valueChange observable.

[JayCeeGee]

Great video. Can't you use .patchValue(this.user) to patch the object into the existing form all at once instead of doing it for each value name/email/bio? Your videos are helping me a ton with rxjs. Keep up the good work!