Angular: Reactive Forms Login + Register 1/2 | Blog Project V-07

hi and welcome to the next video of a serious with this video seven and who will handle reactive forms of angular and B now especially the lock-in and the register forms so the structure as as always we will have a look at the video outcome and we write a user story for it and then we will implement it and at the end we will have a look at what is coming in video eight which will be customary data's for reactive forms so let's see what we are billing so we have here register page and you see it's all reactive so it's always tracking if all the properties are there so we can go our full name is Felix our user names let's say Phoenix free our mail is Felix Felix free de and we have password and now we register when we so with this we going against our back-end and now I just console locked it out so we can use this here and we can lock in and now you can see that we are having our local storage and you token for our user so now we have our two forms that are completely reactive and that are always validating the input I as always we first have a short look at what we are building in this video so here we have video seven and we want to build a lock in and register with reactive forms so we want that all in register Pedro setup of reactors forms so the user can get an instant feedback and we accept this criteria are we want to use English and reactive forms and we want to do both the register and the lock in component visit so we can keep this and doing and as you can see the next videos are about custom validators and also the login and register of mdi-x store so this will be coming in the next days or this year in two days so let's start our feature planted we use again get flow for this so we can go get flow feature start and we are in video 7 so let's have a short look at reactive forms in angular angular you're having two ways to work with form so template driven and reactive forms we're using the letter 1 and with reactive forms we can build our own representation of this format or component so we have some features or some benefits but we can use custom early data's what we were doing the next video we can train for validation and we can add in form fields dynamically so you can see here you can import all of this from angular forms to use and then we have here VI TM and so we have a form there we can bind it to our form group in our component this is our company our component our formed group and we make our and resubmit so if we hit this button with type submit' we will execute this method and then we have fewer inputs and the form controller name is the name belongs to our my form and then we can go into our component here you can see we have my form so this what we had here and then all the properties so email name message and then it's a new form controls of it angular is looking out for this and then you can also have validators like here and there are some validators red or they are from angular for an example required so there must be specified something and the user has to type in something and then you can also use validation parents so you can track it there's number or whatever or I'm in length my things so you can even build your own custom validators so we do this in the next video so you have here or complete form in the HTML so we have as before our form group my form and our input with a placeholder and then for name we can get the property from the form and if there's an error ik on the required so if this is true then we display oops please provide a name and if you type something in when this will disappear because this is no longer true so this was a shorthand so now we can go to our code so now we on our code and the first things that we can do is we can go to our app module and we have to import some stuff so we need our forms module from angular we need to be a reactive forms module and then we can go with something from angular material for example and you know form and there we have what do we need we need a form field copy a fun-filled module we also need net import module so we can validate this fields and we will need the net button what doing cost we want to have a nice-looking login and register button so we import this from ela materia and there from button and now we are ready to start so the first page we can do is our login page in component and first we can go into our controller and we have to initialize a form so we go with Navi inform and say it's a font group and then we will need for this our out service so we can go against our back-end and this should be from an educational service and then we also have our router so we can route the user it will not be more successful to the next component or the next page so when our entry on the net we can init our form so we go this log in form and make a new font group and then we have multiple ways to do this so we will do this here in one way and then we reduce a comment in the other way so you have seen both of them so first we can go here for a new form controller and here we say initialize where you will be nine and we can add some validators from angular and for this we need this brackets and we can go for validators that required we can go or we can even check if it is invalid email format and we can go for example min length and say it's same in length of six so here we have our email and then we can go for another property let's say it's the password and here we have again our form controller and we can a new form controller my mistake wait no and only data's required and we can again go for mini--length for example 3 cos mystery password should obviously be longer so let's check if everything looks right so they've our font group we have our properties email and password with form controls and then we need a method for on submit our form like we saw before so we go for on submit and then you can get some properties on your form and you can just say this login form and then there are properties like valid invalid and so we go for if invalid is true we just return so nothing would that get executed and then we can go against our out service and say login and then we can just not use value of our form because the property's unnamed email password as they should be well as via name our back-end and an hour or an hour service so we can work with this and then we can just met and about B are getting in return honest to get a token but we can just go with this router dot navigate and we can navigate to our admin page so after knock in and sends the best year is observable we can just subscribe to it so let's get executed so let's have a quick look at our service here we need to add a knock in form so we can just go with export interface and we make a lot in form out of it because we just need two properties here and this are the email string and they we will be need to them always so we don't need to say operator or something like this so that's we say operator but we don't need this year and then we have our password so nothing will need it so we have here all of uniform and then we can go for email login form the email and password inform the password so now we can switch to our HTML and all in component so what we say we want at first you want to know where are we so we can say we are on our login page and we can move this a little bit so the first line and here we can say for example our stylist text-align:center so it's always centered to mother's spaces so we are unlocking page and then we can go for forum and here we want to bind this to our font group with angular and we say here we are in our login form and then we can make an envy submit and say we want to execute our on submit method inside our form we can go for a dip so we structure it a bit and we can say we make class container now we can just add this to our CSS or this is just plain CSS normally and we can go for flex box the Flex we can go with Flex direction as a column and not as a row so it's good and then we have the line items Center so this is just a very basic way to Center everything in it so we can see this later this looks a little bit better and our direction it's also a column well we don't need this two times and then we can go with our container again and we will just with 40% this should be enough on the page so now we can go back to our HTML and here the first thing that we want to do is we want to have a net form field so we can make some inputs so we can do an input here and we say this is from type net input so angular material we have a placeholder which will be email and we have a form control name this will also be emailed so our property from our not in form and then we can go with net hint and make it hint if there are errors on our form and there are two ways that we can go to this so we can make an energy and we can say look in form dot control it's when we get our property email and if there are any errors on it we want to display them email is very quiet for example and we can just copy this and use this for our password property so we say the place holder is at the password and our form controller name so which was connected to our form in form here so our password our email and then we can just go for password to the arrows and then we say password is required and then we can go and make our button here we can have a short look at angular material we are on the page so we can just look where are the patterns and I would like to go with flat button for example so we just use this attribute and we can go with the colors the primary color from our angular material theme and then we can bind it to disabled and say this is disabled if our login form is not valid or invalid and the type is obviously submit and we can give it a name login so what we have here now with our form we have our and we submit our container our email our password properties so if there's nothing typed from the user then we will display a password as you quiet an email is required and then he can submit the form so I think this should be everything so we can try to start it the first we have to run our API npm run start death and then our second terminal we can go into our front-end and can say angry surf and let's look at everything and start incorrectly so now our back-end is starting and you can see everything is fine and we can lounge postman in the meantime while our front-end is compiling and get our values for a V log in so we can rank this so here we can so here we have our user or our email and we can just go with this and you see it's now comply the other thing so this looks quite good and we can go to our local house to our login page and here you see so I will open the content so we see if there are any errors this looks fine so you've seen email is required so if I just type in this this will always be there because it's validating it it's for example email you see now it's gone so we take this and password also if we are shorter than this some yeah now you see we forgot the type password so that our characters are not being displayed so we can say here the type is from type password and now we should not get this anymore but if I type something we will get button is whatever business card and now you see we got navigated to the next page we have a token here so we locked this out so we are in our service and if we look at our local storage you can see we have our well a tray WT return from the back end so the next thing that we do is we go to our register page or component and can do the same so we go into our or we can first copy properly our SCA SS cause west will be the same and we can go with h1 or we can just copy this and go we're reckless subpage and then we can make our component first so let's go into our Vista component and say we have our register form and this is also from type font group and here we will need our art service so our authentication service we need our form builder so this we were not using a new login form or in the login component but we use it here so we have the form builder and we have our router so we can navigate again if everything is success so we cannot get to be login page after registration or whatever so the first thing that we do we want to initialize our recursive form and for this we can use our form builder and coupe and so we are just basically the same as before envelope in form but just the different syntax or a little bit shorter so we can just say we initialize it here also with an I value and then we use some validators so we go for validators required then we have a user name and we will also go with Naya and validate has required so that this is always needed then we have our email and we can go again finale and we can say we have some validators here required email we can go also for min length or something min length 6 and then we can add after this our password property where we go for knowledge and we can say all right so the required validator we can go with min length is over the same as an honor in page and then for example what we could do or what we're doing in the next video we will make some custom validators so we can say password contains number for example so we just comment this out but this will be done in the next video and then we will have a password confirm cause of you you will always have to type the password two times so that we are sure that the user is making the right password and so we save as as required and what we can do or what you can do now you can add a complete or another option to your form and you could go for validators validator well I think we have to do this here and break it here then you can go for validators and for example we could use a custom validator here and say password mattress like this will also be done in the next video and then you can just compare basically the password to the password confirm and if they are not the same that form is invalid so now we need our on submit method and we can just go here with the same as before it was Rishta form so you know we have some properties here and if this is invalid so if this is set to true and this is always if something of this when data's are not fulfilled then we just spring odd or hop hop odd so to see this we can just constant lock this here a bit and say this register form door value and then we can go against our out service and use our register method this is not here we will do this in a second and then we want to pass in our register form don't value and we can pipe it and map the outcome I think it's the user or whatever we are getting there but we can just go and navigate to the next page and can say navigate and since we are now on register we can navigate to login page because if the user retro services retro start successfully you can just it just want to in locks in them and since this is an observable we can go for a subscribe and now we have to implement this so we go into our authentication service and you can see here we have our login method and now we want also to go with register and here we can say we want as imported user and we will make another interface for it so we go for export interface user and the user will have the same as we have in varistor component so name username email password so we go for name string user name string email string password string and password confirm strength so we can all make a you see of a safe operator so we don't always need to specify every property so I don't know is it good you can do this and then we can go return second return this HTTP POST we can for the east go against make type any and now we want to go against our API and against our users route then we can just paste in the user type the outcome and say we want to return our user so let's see if everything is compiling this looks fine also just look in the front in our it is a component so there's no error and now we can go into our HTML so we have here our register page and we can add some not right now to it so as before we have our form and then we are having our own group and this is our register form register form and then we have our nd submit method so if we submit we want to execute our on submit and then we can go for our div and we have here our class container so that everything is centered and then we have our first net form field where we can have our input and our hint so we have here our input which is of type net input so we use angular material here we will have a placeholder which is fully named so please type your name and we have a form controller name which will just be the name and then we can go with our method to display something if nothing specified or if there's an error and as you remember before we were getting to this property if there are any errors with register form don't control it and the property is so named but what you can also do is you can go for register form don't get you can type them here the property so we want to get the name and then you can just go for errors or later if you make your own customer later you can go for has error and go for the name of the error but right now we are just going for errors then we can for example say full name is required so the next thing that we are the next property that we have is our user name so we go for user name and the property on the place holder is the user name we can say your username we want to get the username if there are any errors and we say username is required and we can do again the same thing for our email and we say your email and we want to get the email I will say email is required and yeah basically we are doing you know just the same stuff over and over again so now we have our password property and we just say it's the password we want to get the password but any errors and as before in our password there also we specify the type so no one can read it so the type is password and then we can make our last fields or the password confirm what we are noting doing now with but in the next video with our custom validators just say confirm your password and then we can say password on the firm is required and this is password confirm so the last thing that we need is our button so we go for button we want to use the same that button as before so we can go on that let button then we can say it's color is a primary color and we disable it is disabled when our register form is not valid so we could go for register form not valid or we can so if it's false or we should go for invalid so there are always different ways and the type is submit and then we can just name it register so this should basically do everything that we need and we can just check if everything is working so you see we appear odd if you type nothing in manual it's getting read so let's just say when you name is something that we don't have turn now let's call it it Felix the user name is Felix 1 then we say Felix it Felix teehee we say password and we hit her register now you see we've got navigated to our login page and now when we go to our postman and we say we want to get all users give it a hard time and we can look if the Felix user is there and you see is here so we now can commit all our trainers and we can say video 7 added reactive forms for login and register page and made new method in our service so I will not commit this because I had to type or to tape this video two times cause the first time my sound got lost and I already have miss commits on the branch develop so it's already there but you can just down at a repository and everything is there so let's look at our story at the end so we have here our login and register for active forms so our acceptance criteria are met so we used angular material and reactive forms and we did this for register and for avi login form so we can move this to DOM and then we can go or a we'll just name this so this will be the next video so we make custom radiation or customer leaders for our forms so let's have a short look at video 8 and there we will deal with customer data's so the first solid data will be we will compare our two passwords an orator surf component and we check them if they are the same and the second one is we want to track if our password contains a number so we will just click or handler custom validators and not more so this video will be coming in two days

Channel: Thomas Oliver

Views: 9,475

Keywords: javascript, typescript, nest, nestjs, nest.js, angular, typeorm, git, gitflow, node, blog, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, pagination, paginating, nestjs-typeorm-paginate, angularjs, angular-2, angular 2, angular9, angular-material, angularMaterial, angular material, reactive forms, reactive-forms, reactiveForms

Id: eg4vmsKe9h4

Length: 33min 46sec (2026 seconds)

Published: Fri Jun 05 2020