How to validate username and password in Angular 17?

welcome everyone have you ever found yourself wrestling with the challenge of implementing secure and efficient user authentication in your web applications it's a common hurdle but crucial for protecting user data and ensuring the smooth user experience this is aasc your goto source for all things angular and web development today we are diving into the world of angular 17 to master the art of validating username and passwords whether you are building a new app a ref in in an existing one this tutorial is packed with insights to elevate your development skills before we get started a bit about me I am aaer with over 12 to 13 years of experience in angular development I have navigated the complexities of user authentication in numerous projects most notably in my recent project I implemented a robust authentication system using angular 17 that streamlined the user experience while fortifying security so rest assured the insights I'm about to share come from our real world applications and hands-on experience in this tutorial we are going to cover several key segments first we will set up our angular environment an essential foundation for any project next we will dive into the nuts and bolts of angular forms understanding their structure and how they play a crucial role in user authentication then we will move to the core of today's topic implementing and understanding validating logic we will look at the angular's buletin validators and even how to create custom validation functions for more complex scenarios finally we will touch on error handling and user feedback ensuring that our users are guided correctly when they interact with our form our object is clear by the end of this tutorial you will be equipped with the skills to validate usernames and passwords effectively in angular 17 so let's get started all right let's jump into the first segment setting up our angular 17 environment this is a crucial step to ensure that everything runs smoothly as we develop our application first we need to install the angular CLI which is the command line interface for angular so it is powerful tool that simplifies a lot of the processes in angular development so open up your terminal and command prompt and type this npm install DG at angular / CLI I already have installed it so I will not enter it but this command installs the angular CLI globally on your computer with this tool you can easily create new projects generate applications and Library code perform a variety of ongoing development task and more now let's create a new angular project so for that in your terminal navigate to the directory where you want to install your project to run so type this command NG new project name I already have created my project so I will not run this as well but uh when you run this command replace the my project but with whatever you want to name your project the ca will prompt with you the ca will prompt you with a few questions regarding the setup for most of these the default options will work just fine a quick tip always organize your project files and structure in a way that makes sense and easy to navigate this becomes incredibly important as your project grows in size so with our angular environment setup we are ready to D dive into the world of angular forms next we are going to explore angular forms are crucial component for handling user inputs like usernames and passwords angular offers two approaches to handle forms reactive forms and template driven forms reactive forms provide a model driven approach to handling form inputs this means you define the form structure and validation in your component's class it's more robust and allows for more complex scenarios like Dynamic validation on the other hand template driven forms are simpler and more suitable for basic scenarios so here you manage forms directly in the template using directive for our authentication form we will use reactive forms due to due to their flexibility and control so let's start by setting up a basic form with username and password Fields so first you you need to ensure that you have imported the reactive forms module in your app module if you're using App module otherwise if you're using the Standalone components like me then you have to import it directly in directly in the Imports array of your component so I'm using Standalone app component so here I will simply import the reactive forms module now in your component typescript file set up the form structure so first of all I will Define a property or variable login form is equal to new form group make sure to import the form group from the angular / forms and call this and pass the object and in that object every property would be the field of our form so here I will have a form username field and give it uh an instance of form control and then you will pass it a default empty value and then for password same now let's go to the HTML template and here let's add the form tag then we will have input another input and a button okay so in the form I will add uh directive form group and here I will pass the login form form group that we just created and here I will add a placeholder username and then I will add form control name username okay and in this button this is going to say login and here I will add placeholder password and the type would be the password and here I will add the form control name password now let's quickly look at it in the browser okay let me improve the styling a little bit so here I will add the form selector and add display flex and flex direction would be column okay and now let's add some gap between every element and let's add some width and in the form I will style the input okay and let's style the button me pick pick some color for the button me remove the bowder and outline text color should be white okay all right so with these steps we have set up the basic form structure next we will dive deeper into adding validation and handling some missions now let's enhance our form with some validation logic validation is key in any form especially when it comes to sensitive information like username and passwords angular provides a set of buin validat under validators class these include common validations like required minimum length max length and pattern you can also write custom validators for more specific needs so let's start by adding simple validation to our login form we want to ensure that both the username and passwords are entered and adhere to certain rules for the username let's say it needs to be at least four characters long for the password we will require it to be at least eight characters so let's see how we can do that so in the the username form control instance I will pass a second argument with an array that will have multiple validators validators do qu and uh make sure to import the validators from the angular SL forms and then quir and then we need another validator minimum length should be four and same thing will be for password here I will have the minimum length of eight okay now I will Define some Getters username this. login form. get username will return us the username control same for the password okay now let's go back to the HTML notice how we added the validators do required and validators do Min length to our form control this will ensure this will enforce our rules when the form is submitted but how do we know if the input is valid or not that's where we check the status of these forms controls in our component once we have our validation logic in place it's crucial to provide feedback to user this in walls displaying error messages and applying visual cues to indicate invalid Fields so first let's add some HTML to show error messages when the form controls are invalid so go back to the HTML and after every input I will add a span tag and in the I will actually wrap that span tag in the if condition and in the if I will check if username do invalid so it is saying that object is possibly null so I can add question mark here to get rid of this that error and here I will check if it is invalid and username is dirty and username is touched okay now in this span I will add the error message username is required and must be at least four characters okay now we will do the same thing for the second error message so here I have added a condition if password is invalid and password is dirty our password is touched then we will display the span that is saying that password is required and must be at least eight characters now in the button I will add the type submit and here I will add a conditional dist uh disable directive that if login form is not valid then make it disable so notice the if directive if it checks if the form control is invalid and either dirty changed or touched that means focused or blurred if both conditions are true the error message is displayed furthermore we can enhance the user experience by adding some CSS to visually indicate invalid inputs so let's do that so go to the CSS file here in the input I will add and. ng- invalid and touched so it will add the red border to it so let's do that with these changes our form not only validates user input but also communicates effectively with the user guiding them to provide the correct information so further right now as uh this error message is still not sufficient it is not giving giving giving you the exact information like I have added some text but it is still saying that it is required so it should be more specific so to make it more specific we can do that so here I can add another if condition and I can check and here let me add okay and same thing will be for the character limit okay and now it is saying that username is required but if you type something then it will tell you that username must be four characters so in this way you can be more specific about your error messages and further uh let me do the same for the password as well I will remove this add the other condition okay now you can see that we have specific error messages for the password as well if if we have the required error for the password then we will show the relevant error and same for the length okay now let's give it a try and you can see that it is showing different errors on different situations so as soon as your characters would be it length then it will go away the error will go away okay great our form is now equipped with validation and user feedback but how do we ensure it works as expected this is where testing and debugging come into play to test our form let's start by manually entering data to see how it reacts try entering username less than four characters are a password less than eight characters you should see the error messages we added for debugging let's say you are not seeing the error message a common approach is to log the form state to the console this can reveal if the form controls are being correctly recognized as invalid so go to the TS file and let me add the onsubmit function and here I will console the value and okay now let's register this function on the form submit event okay now so now so in order to demonstrate that let me quickly add the syntax in the HTML that login form. value. Json uh and I will use the Json pip and further I will show that if it is valid or okay so you can see right now it is telling us that username is empty password is empty and it is valid it is not valid valid is showing is f if you type something it will show you the value in the real time and as soon as your form is valid you will see that the valid become further one last thing in this segment I want to change the login button if it is because right now it is disabled but the cursor is still pointer and it seems like it is not disabled but it is dis so to make it look like a disabled but we need to go back CSS file and here we will add selector disabled add okay so I have added the disabled selector and I added S I added the gray background and the not allowed okay so the now it should work so now I'm checking if it has a disabled attribute then the color should be gray and as soon as it will be valid the color would be blue again further you will see that not allowed cursor is there and that's a wrap let's quickly recap what we have covered in this tutorial we have set up our angular environment and created new project we explored the differences between reactive and template driven forms we implemented validation Logic for username and password Fields using angular's butin validators we added error handling and user feedback to guide users effectively then finally we discussed the importance of testing and debugging our form these steps not only enhance the security of your web applications but also significantly improve the the user experience now it's your turn I encourage you to implement these techniques in your projects so see how it transforms your user authentication process don't forget to hit that subscribe button for more angular tutorials and if you have any questions or topics you would like to see covered drop a comment below your feedback is invaluable to us thanks for watching ACH remember we are here to help you navigate the exciting world of angular development check out our other tutorials and playlist for more tips and tricks and don't forget to follow us on our social media channels for updates and exclusive content stay tuned and keep coding and see you in the next [Music] video

Channel: AyyazTech

Views: 919

Keywords: Angular 17, Angular CLI, Angular Forms, Error Handling, Reactive Forms, Template Driven Forms, Testing and Debugging, User Authentication, Validation Logic, Web Development

Id: 8n7YEdjIrNs

Length: 14min 11sec (851 seconds)

Published: Mon Jan 29 2024