Angular 13 Fundamentals

Angular 13 Fundamentals Form Solution Q&A

Learning Paths:
Check out a free preview of the full Angular 13 Fundamentals course:
The "Form Solution Q&A" Lesson is part of the full, Angular 13 Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Lukas answers student questions regarding if the exercise could be simpler using a reactive form, if custom validators work, and what happens with unused Angular Material components. Questions regarding how to handle injecting new instances of a model and a brief discussion on custom validators are also covered in this segment.

Get Unlimited Access Now

Transcript from the "Form Solution Q&A" Lesson

>> So before we go any further, I want to open the floor for questions on this particular solution before we get into services. So Mark, wherever you went, I open the floor to you.
>> They said with reactive forms, you don't have to do much with this.
>> If you want to update for instance a reactive form, all right?

[00:00:25] So this is where I fundamentally I think things get real heavy real quick. Is that if I have a reactive form that, I have to declare the form control. And so, in your code, you have to go and declare this, so there's new form control. And then I need to go into my form, and I need to basically wire this up to every input.

[00:00:59] And more importantly when I wanna change it, what I have to do is essentially use set value or a patch. And so that's where things get really, really, really heavy. Is that I'm basically having to manually declare everything that just happens under the hood with basically template forums.

[00:01:32] For me I have historically found that that's not really worth the effort. So, this to me, this is exactly why I do not use reactive forms anymore. Is if you are going to do something like this in reactive forms, you're literally having to define a form control in a form group for your entire data model, versus just binding the data model to the form itself.

[00:02:09] And so that's where, I think that even, well, I wanna update it. Well, instead of just having it update so for me over here. And I'm not saying that there's not a use for reactive forms. But I think for most cases, that people use them because this is what Angular says to do.

[00:02:32] But when it comes down to it, if I want to update a value, I start typing and it starts working. It's automatically updated and because it's not shared mutable state, that I'm able to accomplish this with really just Engie model. Versus if I come back over to here, for me to do the same exact thing, I have to create an entire instance of the form group or the form control.

[00:03:04] And then essentially, patch that value into the data model. So, just for me, that's just a ton of work, but even here, it's well you lose form builder. Well, you were essentially having to build something that you get for free with template driven forms. So that's where I do differ from I think people that even to the point where they just tell us in the dock use reactive forms, but we built 1000 of these.

[00:03:50] And he realized that you're manually defining something that you get for free with template driven forms. I have a really hard time justifying that expenditure of effort. So that's for me, I don't think that what you get with reactive forms is just an extra layer of complexity. And for most forms, it's not worth it.

[00:04:21] So when creating an empty form model, we can create a model builder. Can you speak about that if it's relevant and you would design that. So then I'd be really curious what you mean by model builder because I'm interested in those kinds of things. But I don't want to assume that you're talking about one thing and it's something else.

[00:04:52] So if you wanna elaborate on that, I'd love to hear it. Do custom validators work? Absolutely. What if we import an Angular material component like a button and you never use it in the app is it going to affect the bundle size? So, out of the gates by default it will.

[00:05:19] So I know that Angular is working on things like tree shaking. And this idea for being able to go through and determine are we using this or not and then not bundle it, that's a pretty complex problem. Again, if you're importing something whether or not you use it, it's going to be added into the bundle.

[00:05:45] One of the problems is that, especially now with dynamic, being able to dynamically add code or instantiate components. Is that there may not be an instantiation within a certain way that it's looking for, but it's being added dynamically down the road and it may not be appropriately bundled with that.

[00:06:10] What I do recommend is that if you're dealing with something you're concerned about bundle size. That trying to segment your application into lazy loaded modules. So the answer is, it will absolutely affect your bundle size, so be very judicious about what you import. Even to the point where within this, if we look in the code within my material module here, that I'm using some of these, but I think I have all of 15.

[00:06:53] But if we were to go to, here we go. On the other hand in, they're doing this in a stack Blitz. So these are for demonstration purposes, the similar modules. So what they're doing is they're basically importing all of the modules, and then making this available. As you can see, that they have a similar material module for example purposes, but every one of these are being imported and is part of the package or the payload that footprints.

[00:07:34] So this is where you could, as you start out, you could add everything in. But then as you start to build or get closer to production, I would absolutely work on parsing that out and trying to slim that down as you prepare a production build, okay? So I think I understand in what you're saying is that you have essentially where you have an instance of the model coming from the server that you're able to inject.

[00:08:13] So if I understand correctly, the one thing that I do do when working with a full stack application. So I have node, nest, and Angular is that I will abstract out my interfaces into a standalone library that then my node application and my Angular application will share those interface files.

[00:08:43] And so, that establishes essentially the model contract from the back end to the front end. But what then what I'll also do is once I have consensus on that, then it's not very hard to then generate even mock data structures based on those model definitions and make those available.

[00:09:08] So I've done that in Nest. There's actually a library that does that just in memory for you using Faker, but I've also done that in Serverless. Real quick, so there's a couple a questions about custom validators and, So you can absolutely do custom validators. Let me see if I find a, So, if you go into the documentation, so adding custom validators to template driven forms.

[00:09:58] If you wanna read more about that, you can absolutely do that. And then, And I was hoping to talk about this a little bit later. So in terms of control value accessor, Ahmed, I'm still working to get that into the workshop, we'll see. But if not, I will absolutely post that into the code for you.

[00:10:29] So that's in my queue. With that said, let's move on.