💥 Angular TYPED Forms: Are You Using Them Correctly? #angular

in this video I'm going to show the best and most optimal way of using strictly typed forms in angular I'm also going to show you in the second part of the video a pitfall to avoid which is how to achieve the same result using strictly typed forms but in an unnecessarily complicated way that I think that you should avoid so first part of the video the correct way of using strictly typed angular forms second part of the video a pitfall to avoid so without further Ado let's get started learning angular typed forms so what are angular strictly typed forms this is a feature that was introduced a couple of releases ago that allows us to have type safety in our forms let me give you a simple example I have here a running angular application and I'm going to go here to a login page so a very simple form just an email and a password and the login button is going to enable whenever the two form fields are valid a typical example now this is the component that corresponds to this form here the login reactive component now you can see that the form is being defined here as a form group so this is a form group member variable and the form is being defined here on NG on init using a form Builder now what is the problem with this way of declaring forms that I think that you should avoid if you are using the latest angular releases that is the problem with this way of declaring uh forms is that this is not type safe so for example if I scroll down here on Eng on init and I access here the form value you are going to see that I have here no type safety even though angler has here the information that the form has two Fields an email and the password both of type string I get here no type safety I don't get here autoc completion and furthermore if I use here other apis of angular form such as for example patch value you can see that I have here no actual uh type safety you can see here I have no suggestions so please disregard here this is just GitHub co-pilot but in terms of type safety I have here no autoc completion available this form is considered to have the type any so if I take here the form value and I assign it here to a variable for example using this so I'm going to access this dot form. value and I assign this here to a value you can see that this is of type any all right we can see here on the popup and also if we hit control shift p on webstorm we can see that the type that is inferred is the type any so we don't have any type information so how do we turn this into an angular strictly typed form where we have type safety in these scenarios well the simplest way if you are using uh the latest releases of angular is to Simply remove here the type from your form member variable and now you are going to grab here the code that you have typically in the past used to write this code on NG on init but you're going to grab it and you're going to remove it from NG on init and you are going to assign here the code directly to the member variable all right so you can see that we did nothing special here all that we did was a simple copy and paste but guess what thanks to the magic of of typescript type inference now we have here a strictly typed angular reactive form let's see this in action I'm I'm going to now Define here again our value and let's assign it here this. form. value and this time around if I check here with control shift p well we can see that the values here is of partial email and password so we you can see that we have here type safety so if I do a value dot I'm going to see that I have here in my autocomplete box the email and password properties which are either string or undefined so all of the sudden I can write type save code using the form value this is very useful in many scenarios especially when you are assigning this value to something else in your application for example to say save it on the back end but also in the case where you are calling other form API such as for example the patch value API so here if I hit control space I get here type save autoc completion my ID knows that I have two properties I have an email and I have a password and it knows the type and it knows the types of these properties so if I assign here a number I'm going to get immediately a compilation error before this would just create some sort of error at runtime potentially it might even go undetected so this is a very useful feature and I think that in general we should as much as possible use angular strictly typed forms in our applications it makes things much easier now this is the correct way in my view of using angular strictly typed forms we just leave we just let the generics of the API and the type inference mechanism of typescript to infer the actual type of the form we don't assign it any form we just let uh type inference do its magic and look here if I check here the type of this form we can see that it's a form group and then we have here the definition of the properties the email is a form control of string and the password is a form control of string all of this was deduced via type inference by the compiler now what is the other way of uh doing type safety in angular forms that sometimes you see mentioned online that in my view is not optimal so this now it's not the optimal way of using strictly typed forms this is kind of the pitfall that I think that you should avoid which is to use here the generic parameters of the form group and other apis of the form Builder and of the form module in general to Define here the types explicitly and you can do that you will see the examples typically online it's something like this you define an interface which is login form and you define an email and a password and you have here a form control of string and the password is going to be a form control of string then you might see that um the form variable is defined here as a form group of login form so in those examples you see that the generic parameter of form group is being used explicitly and then here on NG on init you're going to see something like this this form group Etc and you might even see here the use of this generic parameter as well all right in this case this doesn't work correctly but you get the idea all of these uh apis here the form group the form Builder group API all of these apis have generic parameters and when us developers see these generic parameters on the definition of the apis we are many times um tempted to just use them directly but many times these generic parameters are not meant to be used directly on the application code they can be used in certain situations but most of the times the what is going to happen is that the output here of this form group call is going to be deducted based on the input parameters so the way that the typescript type inference mechanism is working is it's looking at the types the infer types of the input parameters of this API call and it's using those types to deduce the output type of the call and typescript allows us uh to do so transparently without us having to Define explicitly generic types so just to avoid any confusion I'm going to refactor this again into what is in my view the best way of using strictly typed forms which is to base ourselves fully on type inference only this API here is using the type information of its input arguments in order to deduce the type of the output of this API this is in my view the best way to use strictly typed angular forms so I hope that this helps if you want to learn more about um strictly typed forms you can always check the angular documentation you also have an article that I wrote here on my blog you can find it here angular strictly typed forms where I go into this in a little bit more detail but I think that I managed to um capture the gist of it in this video all right guys so I hope that this helps let me know if you have any questions if you want to learn more about uh angular forms I'm going to remove this here if you want to learn more about angular forms uh and uh all sorts of advanced features you can check here in the angular University this is my website you can check here the angular forms in depth course you have here uh all sorts of advanced features of the forms module I cover a template driven forms I cover reactive forms in detail so the course is mostly about reactive forms I think that that is the best way of doing forms in angular you have all sorts of advanced topics we build custom components we teach how to build custom form controls we build a multistep form a wizard so you have here all sorts of nice exercises that will help you to dive deeper into angular forms so I hope that this helps thank you for watching leave me a like or a comment uh saying what other content you would like to see here in the angular University Channel thank you everyone and talk to you soon

Channel: Angular University

Views: 3,312

Keywords: angular 5, angular 5 tutorial, angular 5 course, angular 4, angular 4 tutorial, angular 4 course, angular 2 tutorial, angular 2 tutorial for beginners, angular 2 for beginners, angular 2 introduction, angular 2, typescript, angularjs, angular, yt:quality=high, udemy coupon, udemy, coupon

Id: it2BZoIvBPc

Length: 12min 7sec (727 seconds)

Published: Tue Jan 09 2024