Coding Shorts: Angular Template Forms

welcome back to coding shorts my name is sean wildermuth as usual today i want to talk about angular template forms and how data binding works with it so i've been doing a lot of you the last few years less so angular but i still work with angular clients and i seem to think i remember how everything works but sometimes the two get a little confused so i was talking with a client recently and he's using template forms and as he composed those into individual components and he was doing all this event bubbling in order to get information at the root components up to the form itself and i thought there has to be a better way this led me down a rabbit hole to understand better how binding works in angular and how rxjs don't really solve the problem i was trying to solve luckily twitter came to the rescue i found the magic string that would do the work but i'm still puzzled why reactivity doesn't work exactly the way i would expect it to work in a spot framework let's take a look at the code [Music] so let's start out i have this fairly simple angular application and i have a problem but let's talk about how it works just really briefly so i'm not using routing i'm not using ngrx or any of that it's just a pretty simple template-based form that i want to work in fact here is the ugliest angular app that exists but it is a working example it has some information here about the person that's made the purchase and then it has a list of orders and then a list of items in those orders and it's pretty simple and i'm able to detect from the template whether it's dirty or not so when i make a change it'll think it's dirty and so i'll know whether it's actually changed or not now i tried doing this with some diff objects inside of angular and i sort of hit a roadblock because what i was trying to do was a little different the interesting part about how this works let's refresh it so it goes back to dirty equals false is anywhere in the tree that i make a change because this is just a simple hierarchy that i'll show you in a minute but if i change this to let's say 25 you'll see that it made it dirty even though i'm making the change way down in the nested part of the form and so i wanted to simply do that so let's take a look at the actual data and the actual data is just this hierarchy notice there's the main object it has an address it has orders each of these orders has a list of items really super simple form right we've all done this sort of forms over data in angular before but the problem came when i was trying to refactor it i was working with a client and they were doing some what felt like crazy hacks in order to make this work the way they wanted to and so let's see what actually happens here get person just returned the data in this case it's just a person and and for my example i'm not even calling a service or anything i'm doing super simple it's just creating an instance of that data so i can sort of show that and then i have some code in here just to hide and show the data just so the page doesn't become crazy big as i'm trying to work with it most of the hard work is done over here in the html and that's where i'm binding with ng model to each part of our form and remember it works right now because we have all of the form in this one giant form right we have all of the ng models and all the controls a simple html in here but because my customer wanted to be able to reuse some elements i immediately talked to them about creating components and so my first step there was to actually create an address component and so let's just look at the address view component it's super simple in fact it looks a lot like the embedded markup right ng model everything's the same only difference is i'm inputting an address giving it a name etc so if we come back here let's comment out our address and let's use this component this component's already been registered with the module in fact i'll just show you the module here we can see that the address view component is already registered and we've got the ones for order and order item as well but we'll get to that in a minute i just want to show you i'm using those and so if i get rid of that and i just do the address and then let's bind the address to person dot address right so we should get the same experience we look at this we can see the city and status being created but these are coming specifically from a component let's change your component just to ensure that that's what we're actually doing here and i'll just say style equals background color and let's make it just barely gray go back here so we can see this is the component now just to ensure we are and what happens if we make a change dirty isn't being changed is it not wired up correctly in fact if i look at the data we'll see atl atl it is binding correctly and modifying it just the form no longer is connected to know that this ng model binding is affecting the dirty and that's because in the case of template forms the form is the only thing that knows about change the objects themselves don't and this really caught me because i've been doing a lot of you in the last few years and less and less angular to be perfectly honest with you and so my initial reaction was well we should just be able to get an event from our object because clearly it's going to be a reactive object and this brought up an interesting point where as view 3 is really pushing towards this model where you can make the data reactive and therefore you can get these sort of events and change notifications and things but they're relying on some code to do that they're wrapping it in refs or rack wrapping it in proxies to make that work and clearly some other components including vue's version of redux vux or if you look at ng rx inside of angular they sort of taken a different approach and that is they're going to control how change happens how those mutation of that data is and so these are two ideas frankly a bit at odds and so i'm still not sure where this will flesh itself out clearly by making the objects simple objects here we're relying on the control structure to tell us about these changes as we need them and that's fine i think but i did want to get this to work i didn't want to go well it all has to be part of one form and luckily i had a lot of help on twitter and i'll include a thank you in the notes because i don't remember their name all of a sudden i have to go look it up um they had the magic piece and this magic piece was not obvious to me i never ran into it on stack overflow i never ran into it in the docks luckily someone had delved deeper than i had and so the magic actually is this piece view providers essentially we're telling the address component here that we want to provide the control container to the existing form that it's inside of so it does rely on our address being inside of this form and this form becomes the single form of truth about dirty or pristine or those other properties that know about whether the underlying data has changed and so by doing that just including those view providers provide our control container into the ng form what happens this just starts to work and so in that same vein i was curious whether it worked completely hierarchically if that's a i'm not even sure that's a word but and so i came back over here and i wanted to do the same thing so let's take our order view here and i'm going to comment it out of course i'd put a little embedded in there so let me do this just so i can comment that out correctly and i'm going to replace this with a control just called order and the order is the order right i've just created the same idea with order where i just have order as an input and then i'm doing that same ng binding and inside of it i'm binding to the order item as well and on both of these i'm providing that view providers now this first level we know works because of the address but will the second level of items work where i've also done adding that view providers probably because we're telling it to take this control container and essentially make sure it's part of the form that's what this view provider essentially is doing there's some more technical specifics with what it's doing but if you take it sort of in faith that's what it's supposed to do our form doesn't really change right but it allows us to go back to having the dirty flag work and still that underlying data is being changed because we can see that this kind of goes to 0.01 here and we're able to do everything we want computed values everything while maintaining the connection to the outside form which is ultimately the thing that my client wanted to use because he was using a lot of embedded forms and so this proved two things to me that i wanted to share one is that anyone can have these gaps in knowledge so don't be afraid to ask people and bug people on twitter it's a good idea the other piece is that it doesn't matter how far down you go because if we look at this remember that here i'm just having a singleton a one-to-one relationship between the parent and the child and then here i'm having a one-to-many relationship with the number of orders and then inside the order item object let me grab that html we're also doing a one-to-many here and so as long as we follow that pattern of providing our control container up to the form we can get all of this stuff to work without having to live with that one giant html which ultimately is something i want to avoid in order to make testing easier in order to make editing easier so that you're really using components even if you don't reuse them a ton whereas here the address part of the form or the order part of the form we may actually use on different pages and so we gain some benefit there anytime i have a control that's all that long i want to break it up into sub components almost always and this sort of allows that fix but it also includes one piece of information and that is there really isn't a solid way to do reactivity within an object graph in angular and that's by design i think and so think about it in that way that you're going to rely on the framework to be able to monitor and and track those changes i hope you're able to learn a little bit and if you got stuck one day writing your own components maybe this helped you i don't know but this has been another coding short don't forget to like and subscribe if you like it or download it and let me know in the comments what you don't like i'm always up for changing what i'm doing and thanks for joining me i'll see you next time on coding shorts [Music] [Music] you

Channel: swildermuth

Views: 100

Keywords: ng, angular, template forms, rxjs

Id: O0s1JuipSoo

Length: 11min 30sec (690 seconds)

Published: Wed Dec 15 2021