Angular: Create Registration Form & Register User (Reactive Forms) | Realtime Chat App | 04/17

hi and welcome back to video number four of a real-time chat app series with nasa chess and angular and in this video we are focusing on angular where we will build a registration form so that we can register new users and we do this with angular reactive forms we will add a private and public module we will add routing and also lazy loading for this so varied basics here then we create the reactive registration form that we use to register a new user and to validate all the inputs from the user so the username the email the password the password confirmation and so on and then we will send a request to our api so post request to create the new user and if this is handled correctly we will display like a little snacks so like a little hint um or information that everything worked or if we get like a failure response then we also display this um here our structure for video number fours as always first we have a look at our video outcome when we read our user story and then we implement the story close it and commit all the changes let's have a quick overview what we are doing in this video here so you can see before we are having like four users in our database with our get request total items for um then we can go here into our front end and here we have our login route and we also have a register route but we can go here you can always go far and back and then we can register and we need to specify him a valid email otherwise he's saying you have to specify a valid email so we can go with thomas thomas let's say 11.com the username should always be unique so it's 11. password should always be a password and we have to add the same password confirmation so the same password that we provided here so if i give him something wrong when he says password are not matching and i have to give him the right one and then also the hint goes away and the result button gets activated and then we get like the message that our user was successfully created and we get redirected to login which will be implemented then in the next videos and now we can make another get request to all our users here and now you see we have total items five so the user got hi and welcome back to the next video this video number four where we handle angular user registration with reactive forms so we can have a look at our story here so we open the preview and the story is as a user i want to be able to register myself for an account through the angular web app my input data should be validated and click on register i shall be redirected to login page if my account was created successfully so here we have some stuff up here that we want to do so um we want to set up like a public module where i have like a login page on the register page where i can enter my email my username my password and if my account gets created successfully in our sqs api when i get redirected to the login page so here we have some acceptance criteria you want to have like a public module a private module so that is when protected or only accessible if you are logged in then we want to implement lazy loading for both modules so that nothing that they are not loaded initially on startup we want to set up components dashboard for our private module register and login for our public module um we want to set up a basic authentication guide for private module but um not with the real load logic that we had in the next videos because right now we just handle the registration but just with everything seems fine then we want to set up routing for our public module so for the register route for the login route and so on we also want to create a registration form with angular reactive forms and have a short introduction to this um we want to display hints or errors in our form so if i don't type an invalid email you want to have like a hint that shows us that this is not valid we need a user service that is where to create the user so that we can make the request from our component to the service went to our backend of course you want to display a snack bar on successful failure with like toast um or something so like a little message that says here user was created so that the um user in angular gets the feedback and the last one is a little bit off topic but um in the last videos i missed the unique on the username because the username would always be unique because later we need this for the chat application so we can then start directly so let's first have maybe a quick look to our api here in postman so as you remember we have like here a request to add a new user um we can log in when we get jwt token back token type and expires in if we get this access token here we can make a get request against our users at the moment we are having here too and if i remove this token then i'm unauthorized so i'm not getting anything from the api so now the first thing that we want to do or that is very easily um we can do on our user entity in the back end and we can also add here a unique true to the username because usernames should not be existing two times and now we can fully focus on our angular stuff so you can see here this was our test service for testing our connection to our backend and now we can just open new terminal terminal and can use or make use of the angular cli so first we have to cd into our front-end folder and now we can create some stuff so first we want to create like a module so we can say ng generate m for module and we can call this private service should be only later accessible in the next videos when we are logged in and have inventory wt and when we add this routing here then we will also create a module and a routing module for our private module so we don't have to do this later so you can see here now we have created our private module and also our private routing module so here we can then add routes for this module later and this is directly imported into the module itself and the other module that we want to generate is our public module where we have like our restoration and login components and actually i was missing here the routing so let's just delete it and do it again so we don't have to do it from hand and now you see we have also our public material routing module and both are already imported or not yeah no we want to do this later via lazy loading so we don't need this here and then we can create some components so first we can say we want to generate a create a generator component um to our private module and we can say this be our dashboard component and then we have it here and i like to do this in a new folder that i named components and then i just move the dashboard component so we have later than here another folder for services and so on and then we also want to do this with uh in our public module so we create a component in our path here public and then we name this simply log in component and we make another one so you see it here where we call register so when we have also a register component and here we can also make a new folder that we named components and then we move both to this folder and then we can see the paths here are actually wrong but we just have to adhere components components and also for the register component and the same goes probably for the private module and then everything should be fine again so maybe first we can try to add some lazy loading here so we can have a look here if everything is looking fine and then for a lazy loading we can simply go into our app routing motion and add some routes so here the first one would be our path is private so this would be then go to for example localhost 4200 private and then it would load um the other paths from the private module then we can say we want to load children so this is used for private lazy loading and then we simply adhere the path to our private module that we want to lazy load so we go to private private module make make.then and then we simply can access the private module and we can do the same for our public module so we make little children we give the import the path to our public module and then we can add like a redirect so if we have no path here matching then we can say we want to redirect to for example to public and the path match should be full so then we need of course to add some routes to our other modules but first we can probably add something here to our private module let's go there so here we can simply say we have our dashboard route so we can say dashboard and our component is our dashboard component and we can also make here a redirect um and then we can make the same for our public module so then we have here our path login we have our component login component and we have our path register with our component register component and we can also make a redirect here so if nothing mattress and we say path match full so then we can format it a bit format it a bit and save it let's close everything else here and then in our app routing module we have to add here because right now we go to our localhost four thousand hundred you still see this no matter what route we are because we have to adhere the router outlet so that angular um on the english layout so we have to add the router outlet so that angular knows um where to render the components so now you can see we are on internet says login works as it is saying here in our login component um then we can for example also check for the register you see register works and we could go to private slash dashboard and then we see dashboard works so the first thing that we don't want to do that we don't want to have we don't want to access our private route directly without having like a trade wt so what we need or what that we can implement is like an authentication guard so we can say mg generate guard and then we can name this guard off very simple and we want to implement can activate and now you see with here our authentication guard you can make a new folder i can name it guard cards and we can move this here and at the moment this is always returning true so the off guard we can activate is always um there to return a boolean value so if you're able to access or not or ultra whatever you want so for example here we can say we also want to have access to our angular router and we want at the moment to always return false so that we can never access our private module because we have to implement this later um when we have the login stuff we can just here and then this router could fire and we can maybe make a little comment to say to do implement real god when login component is finished so this is something for the next videos i think so then we also have to make use of this card so we can say here so we say can activate and then we use our authentication card so we off guard here and then we should not be able to access this route at the moment so when we now try to go to private dashboard you see we get redirected to login or we can also go to private this would also redirect but if we go to register this works fine if we go to anything then it always directs us to public login so i could type in here i think anything and this goes to public login so now we have to do or we can do some stuff first we maybe want to add like an interface for our user so we can make here like a new folder model and then we add here our user dot interface dot ts and then we can simply export our interface and then we have like our email from type string we have our username string and also our password and always optional from type string and we can save it then we can use it everywhere we need it so maybe i would also and later like um shared modules or something but not right now so now we could for example add angular material to our application um because we will need this for our view so for our html files and everything so we can simply google for this angular material services like a library for angular or ui component library that we can use very easily so we just have to end this command here and i think then we have to rebuild our [Music] container so we can install everything this can take a while and we can stop the container or our docker stuff in the meantime so now everything should be installed and we can docker compose build and then docker compose up and see if everything works and for example then we can go into our application module and we can then use the matte snack bar module so we can just google format snack bar so you can see here for example the matte snack bar is there to display here like a little notification for the user that something happened so that you clicked on something or so so we can simply import this here and we can import this application module then we need to add it to our imports so then we can say our met snack bar module and this probably takes some time because we are obviously using it here here so now it works so then we can also use this everywhere where we need it so now we can go to our public module where we now want to do all our stuff for our registration component so first we have to import like all the stuff that we need from angular material so we can say here we need our card module and so we can just go here for components net card module and see where we have to import it from so this is all the angular stuff so metcal module then we have like of course the reactive forms module from angular that we need we need our form field module so that we can make some pretty nice form fields just google it and just see where we have to import it from then we have the um that input module to style the inputs and we have the matte button what you will know is it why not rest so then just let's address here and then this should go away here and now we can make use of like the angular material card reactive forms and so on and maybe the first thing that we can try is we can make here like a button that links us to our registration page and we can just say go to register page and we can say this should be a material button first we can add a router link so that we can with this very easily and make x our route the user on click to another route so here we could say we want to go one up and then we want to go to slash register and then if everything is finished we can see if it works so i think this needs quite some time because of now the english material stuff and then we can later see when this starts everything works then in our registration component we have to do all the stuff so while this year is loading we can you know have a quick look at um angular material or angular reactive forms so we can see here reactive forms are forms where we write logic validations and controls in our components class unlike by with template driven forms where we do everything in the template so the reactive form is flexible and can be used to handle any complex forms in areas you write more component code and plus html which makes unit testing easier so we can enable it very easily by importing reactive forms module from angular forms so just add this here to our imports like we already did and then we have access for example to form control and form group um so the form control can power an individual form control for example our email or our password and so on it can track the value of this and also the validation starter so we can always access like if the user has touched it so clicked on it for example or um made an input or not and so on if the value changes everything here we can also add some validators to it and you can see it here with form group we can group form control instances and keep track always off the complete group so we have here for example a new group this has then first name and password with new form controls and like the um initial value of empty or in null and then in your template we can just use form we bind it to our form group my group that we created here and then we have like an input for conform control name first stamp that goes to this first name here so this controls it and a password for this year you can also nested form use nested form groups and so on but we actually don't even need this then in your form you can specify here and resubmit so which function could be handled if you click the button and so if you have a button inside this and you can just name it submit then this here get executed and you have x and you can just get the complete form value in your component you can also add some basic validation so you have here from angular validators for example required so that you cannot um the form is always invalid if there is no value for first name and the same goes here for password you can also add like min length or max length and so on so there are some built-in validators and you can also make your own you can also make easy getters for the form controls of one component and have easy access to it and here i think um you know you can also disable the submit button if for example the form is invalid and so on so i think this is like short introduction now we can see if everything is started so now we can go to our front end and we see we have here our log in so we can click to go to a cluster page and then you see we switch for routes and now we can try to adhere like our angular material button and see if we added everything correctly to our module so that angular material works and we can simply then so here we have our matte button and reload now you see we have here our angular material button so i think everything should be set up correctly and now we can go completely to our registration form or registration component so the first thing that we want to add here probably is our form so we have a form that is from type form group from angular and then we want to have like here our new form group and then we have some values and the values should be our email so everything that our user has so basically we are just using the stuff here where we create a user email username password to create a user so we want to have email which is a new form control and the form state at the beginning is null and here we can add some validators from angular and for example you see here we have required pattern email and so on so here you can pass in a regex function and so on and so first we can just say required and we can always also check for if it is an email then we have our username this also is a new form control also neil and we can also say this is required then we have our password which is also a new form control with the value 9 and this should also always be there so always required so then we have our basic form that we now can start so i think the ingredient we can press remove because we don't need it so we can just remove this from our component and then we can make here for example some get so here we can say we want to get email and we want to return a form control so here we say return this dot form dot get we get the email and then we can say yes form controller and then we can make the same stuff with username and password and then we have always access to the values very easily so we say return this dot form and we get and we want to get here the username and as a form control and the same goes for password so here we want to return this dot form dot get password as form control can format it and now we have like the basic stuff that we need here and we can switch to our html so at the moment we can just make here like a div and we can make a new class that we call container and then we can add this to our scss and we say we have our container class and here we can give him we want to display flex we want to say you know center our content so we can just use justify content center we can make a margin all around the stuff for 100 pixels and we can say our minimum width so if we later change the width in the browser should be for example 350 pixels then in this diff we could make another div and here we can have all our stuff and then we can go with a diff where we make also a little link to our login page so that you can always go and switch between the pages and here we can to make it easier looking just make link and we can also use router link here and then we can go one up with two dots and then we go to login and then we can just name this go to login and our class i think let's see how it is looking so now we have it here so i can go to again i can go to register and so on and switch either in both directions so beneath this we want to have like another div where we now handle all the stuff for our form so to make it nicer looking we can use angular material card and we can give the card here a med card title and this could be like register and then our form or our card should not always just have a title but it would also have a med card content so you can always go to angular material cards and yeah read yourself further in but these are how they are looking or how they can look with images you have here of elements so title subtitle content images actions footer and so on that you can use so here we are in our content and then here we want to use our form see here at the moment it's very small so first we can probably say here in our container then we have our login class and we can just say margin bottom let's say 20 pixels so that it's not clutching directly to our angular material card and then we have our matte card and our matte card content and then we have maybe our form we can't say we want to display flex because we don't want to have our form increase so that email the password all on one line but we want to have it beneath each other so we go with flex direction as a column and we can justify content also for center and then we can save this now we have here like our space between the log in and the register and now we have to add some stuff and then we can also make that we have like a minimum width of 300 pixels or so on so yeah this should be very easily so first we have to add to our form real form so we add like a form group and this is of course our form from our component so here our form and we can add an envy submit so what happens if we hit the button that we add here so when we want to call our register that's not here at the moment but we can just create it and then this should look fine for the moment and then we have to add our form fields that we need to display like the email field the password field the username field and so on so this should be of course an input then we can specify the text the type so here we can say text if we are going for email or plain do we have yeah we even have email we can um later for password for example specify the type as password then you will not see your characters if you're when you're typing and this makes it more secure um then we specify this as material input so that we have access to all the stuff we can give him a placeholder and we can simply name this username and then we have to say which form control name is it and this here is the email and then this placeholder here is the email and we can copy and paste this here for the username and we can copy and paste this for our password and then we can have a look at it so you now see we are here like an email and this is wrong because it's not validating his email and so now you see it's fine we need to specify username and password now we need a submit button so this needs to be inside our form so that it gets recognized we can give our class like a button class and then we have our button where we say register and this should also be an angular material button you can specify the type this is button and what we can also do this button should be disabled if our form is not valid so we can always check if our form is valid and as soon as or as long as it has any errors so that one of these validates is not fulfilled then it has errors and this should be disabled so we can see here at the moment this is disabled if i type in like an email a username and a password then we could click it at the moment nothing happens but this is how it should work then at the moment our button is here direct displayed on the left side so maybe we want to yeah let it display it on the right side because we always click or look from left to right so we can say just display flex and then we want to um show it at the end so we say we want to justify the content at the end and here we have our button class on the div server child gets drawn tracked to the right then we could for example add some stuff to our form fields so i think we can also move this here into our form and then we can go against our matte form field and we can say these should have a width of hundred percent and a min width of 300 pixels and then also if we make this smaller you see it's not going beneath this point here so it always looks quite good so now we can you know have a little think about everything and uh one thing that we need i think is like um on registration page you should never um we should check if the password that the user provided is correct so he should type the password two times so um that we can make sure that he is not mistyping so when we have like a password confirm and we can also say validators dot required and then we can add this to our form that he also has to fill out the password confirmation so this is also from type password and then he should confirm the password and this is named password confirm so like we named it here and we need to get it and then we say return this dot form dot get as form control so we have access to everything and now we need to check if the password and the password confirm mattress so for this we yeah angular is not having any validators that we can use so we have to make our own and for this we can simply in our public module make another folder we can call it for example underscore help us and then we can well let's say we can name it here our own or custom validate validators so we can make a new file custom valley daters dot yes and then we can export a class custom validators and we can make it static and we can check for passwords matching and here we can make use of abstract control so that we can here get the values um from our angular material from our form and we want to return even validation errors or null and then we want to get our password and this is with our abstract control we get our password property and then we want to have the value and the same goes for the password confirm here we want to get the control for password confirm and also access the value and then we want to check if they are the same so we can say if password and password confirm are same and password is not denied and password confirm also not denial then we want to return nile as we want to add like an arrow and we want to return the error object and we say passwords not matching true and this basically is so the validation errors if our password and password confirm are the same then we return 9 so we don't add like an error where we use this validator later but if they are not matching then we add to our form for the errors the error passwords matching not matching true and then we can handle with this so here in our register component then we can add here like another abstract control options to our complete form so this is not um for our yeah controls but for our complete form and here we have our validators and then we can import our custom validators dot passwords matching and then this should check if they are matching and add an error if not or let everything out as it is with an eye yeah so now we can also adhere like some pins or arrows and this goes very easily so we can use here and material error so we can say for example here you know i'm at form field we say matte arrow and then we can say we all or we just want to display this if our email dot touched so if the user clicked into it for example and and the email has an error and this could be um our error required so this is required this would be here to true if the validator required is not fulfilled so this is not having a value and then we can for example say email is required and we can make the same for as error email and we can say email must be valid and then we can do this stuff also for the username and say username is required and this here is our username so this is like our get here where we get the username value from our form and we do the same with password and we do the same with password confirmation so password confirmation is required then we can have a quick look at it everything seems fine so we have here email now you see before i'm not clicking into it nothing is displayed but if i'm having here then error so not providing an email or so on then it gets the error if i have a valid email this seems fine when i have a username i can check for password so let's type in aaa and if i type in here something different then we have to change this here yeah because you remember we are not having our error for um the password confirm but we added this error to the whole um form so we have to say if password confirm is touched and form has error and then we not go to required but against the passwords not matching so that is the error that we added here so if this exists so it's true then we say password confirmation we can also say password passwords not matching so let's test this aaa no not working okay so let's have a deeper look again [Music] so we have our passwords password confirm and we have here the custom validators passwords matching so let's check it this is here also right password dot value and now let's see do we have any errors here [Music] no so now nothing is working anymore let's see we get any errors here still in this era why not okay so let's try again so passwords matching control abstract control validation errors or null we get our password we get our password confirm if these are mattering and our password is not null and the password confirms also not now when we return null not we add like an error so let's just see if we even run into it so here we have b now we have a okay so i think my stuff here is passwords not matching so password confirm transform control and then form has error and if i type in the same password then we go into a so this should be fine so if our form has the error passwords not matching hmm so let's try it again see if this works no even not displaying them there must be another error so let's just remove this here and let's see okay the series not working so envy if password confirm dot touched and end form dot has error and this is our password confirm so let's first finish the form and then we can check with this later so another thing that we can do if we want to for example we can display a matte hint so a little hint for the user so we say matte hint we can make it small and then we can say please fill out all needed information and we also just want to display this if our form is not valid so our form dot valid so not valid so we gate it i think in english and maybe here i miss or misspelled so let's see maybe we can find something here angular form as error so this is the name whatever so when we now try we can just have a quick look in our api so if we may get requests against our users we need our token so we login we get our token we add this to our request to get all our users we send for requests and we get two users and then we need to adhere like a user service so that we can make the request against our packet backend with the values for our form so i think this here should be fine so i think it looks quite nice when we fill out all the information then the cindy also goes away if we have an error then it shows it to us now it also says is invalid but it's not displaying yeah maybe we find it out later shouldn't be too important right now i think i'm just missing something very obviously probably so now we can go and yeah try to implement our user service so for this we can also go to our cli and we can say entry generate service and then we go to our public and we say user and then we have here our user service so where is it source app public user service here so we can make a new folder let's name it services and just not to components but to services move everything and then we can make for example another folder where we just say it's user service one second just move it there so then we have our user service here and we can very easily make a request against our backend so we just need to be angular http client and we can also import our snack bar that we imported in via module at the beginning that snake and then we can make a create function here we want to get a user so this is what we want to get from our form from our register form and then we want to return observable also type user and do some stuff so we basically want to make a http request a post request against our backend where we get a user interface back and we want to make this against slash api slash users and we want to add our user to the body so basically the same as here so we make a post request with email username password in our body against api users and as you remember with vr api users and we have already set up in our app epoxy conf so everything that goes against api gets reacted to api so to our this year is our [Music] compose service api so so we have access to this network then and then it sends everything to there and then we need our slash api and slash users to make the request against the appropriate part then we can pipe it and here we can make a tab we have to import it so i think this should be imported from ax js operators and then we get here like a created user and then we can say here we want to use our snack bar we want to display a snack and then we can give him a message so we can make these perfect ticks very easily and say user and then we take here we created user dot username for example let's say it was created or he was created successfully then we can add like um like a button we can say this should be closed and we can also provide some more options to it so for example we can say duration should be i think two two seconds that two thousand milliseconds we can say the horizontal position should be right and the vertical position should be top and then after the tap we can make a catch arrow also from ax to s we can catch the error and if we get an error we can or at the end we want to throw the arrow but before we also want to display like a snack bar that something went wrong so we can say this.snackbar don't open and say user could not be created and we can also give a reason and here we can also use the backticks and can just use the arrow object that we get from our back end so we can display it here and we can say e dot error dot message so we just display the message we also want to name our button close and we can give you a duration for error maybe a bit longer let's say five seconds and we can copy the horizontal and vertical position and then we can save it and so now we can access this from our component with service and our create function here and then this automatically if everything goes right displays our snack here and if something goes wrong here so we can now import the service or use it in our registration component so here we have private user service user service and we can also import the angular router so that we can reroute to login if everything was successful so in register we first probably want to check if the form is having any error so we can say if this dot form dot valid then we want to execute otherwise not so when we want to get our user service dot create and then we want we could normally you could also say here this dot form dot got raw value but we are having here like the password confirm that we cannot use here so we make an object we have our email and this is our this.email.value we have our password this dot password don't value so here our facebook value access and then we have at last the username with this dot username on value and so since this is an observable we have to subscribe to it so that it's getting like hot and return something and before we can also type and we can never make another tab and here we can simply say this.router.navigate and we can go to up and then go to slash login which can be imported yes so then if everything here works correctly then we hit our submit button here in our form and the form is valid then we hit the register and this should then call our service and the service should call our backend and create a new user so if we now make a request to all our users here my mistake to this request here we have our two users and now we can go to our front end and we can say thomas at thomas i think five i didn't use so thomas five is the username password is password and then we can hit register so you see if i remove this then if the form is invalid oops my mistake if i say password then we can register and now i see user thomas film created successfully we can go to the network and see we made a post request that got back 201 so created and you can see here the answer was id username and email and so if i now make a get request here we get three users back so this seems to look to work good and if i now for example make another request with an email that is already existing or username that is already there so thomas5 i think is already there then yeah we get an error internal server error at the moment because already yeah done and this can be handled later so you see here duplicate key value value violated unique constraint so because this should be always unique so i just moved it now to here and here it is working so if i type in here aaa and here b or whatever and if i then have to correct password everything works fine so i can now for example request another user it's a thomas thomas10.com and username is thomas10 i can register i get redirected to login page i get my snack bar and i can verify here that we now have another user in the database so this should be all for this video here so now we can just make another commit and commit all our changes so we can take it at minus upper a we can commit the trainers here and we say video 4 at public and private modules to angular and finish and add registration form with angular material so that the user can register and send the request with service and we can say simply push this and of course at the end we always have to track our story if we implemented everything that we needed so let's go through it so we now have a public module we do also have a private module we implemented lazy loading for both modules we have set up our components dashboard for our private module christian login for the public module we have our basic authentication guard that we have to refactor when we have login functions or login components finished so that we actually have our jwt from our back end we have routing for the public modules so the basic stuff that we now need and we have a registration form of angular reactive forms and of course with angular material we are displaying hints and errors in our form we have a user service that we need or that we use to create a user and we display a snack bar on success or failure and we added unique to our user name in s3s so we have to commit these trends also so this is when also video four and we name this um update user story and push this

Channel: Thomas Oliver

Views: 401

Rating: 5 out of 5

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: t6BpRxV4b0M

Length: 72min 12sec (4332 seconds)

Published: Tue Jun 29 2021