Angular Reactive Forms: ASYNC Validator And Loading Spinner (In An Input Element)

hello everybody in this video we will see how to use how to create an async reactive form validator and display a spinner loader and an input field let's get started so i think that we have a field like we see here we have a username just an input field i use bootstrap for this one and already we have in the browser that this field is not valid we will see in a while bear with me we will see in a while how we have the validators there and as you can see here we have this exclamation mark and our goal is while typing to display here a spinner replace the exclamation mark and display a spinner so let's see how the code looks like we currently have a username form control and in the engine you need to initialize it it is like this username this form control the default value the first argument of the constructor is null and the second one is that we have the validators required so this is just the required field right and if we can see also the template we can say we have the label username and here we have our input it's typed text we have the class the placeholder and we have also the form control username nice and as you can see here we have two different classes the first one is is invalid and we will set this class if the field if the form control is invalid and also we'll have another one another class that is valid this one and we will set this class for the opposite way if this field is valid and if you go if you say again in the browser if we type something here we can see that we have different experience now have a green border and also we have the green check mark now what we need to do is of course not to have when we render the browser when we render the fields not to see immediately the red border and also as we said previously to see here a small spinner how to do this well first of all we need to introduce an async validator and what is this let's go here ctrl click to see the control the first one the first argument is the form state the second argument is the validator options and the third argument is the async validator and it returns in a sync validator function or in a single data faction array or null okay so what we need is to create an async validator and let's do this i will name this one this validator like a user validator so it will be private a user validator function validator and this one will return an async validator function a sync validator function sorry function yeah this one the sync validators in a nutshell is a function that returns another function so this is the user validator is a function a wrapper function and we need to return an inner function an anonymous one and the argument of this will be an abstract control this one and now we need to define what this function will return we'll see it in a while so let's start by this actually at the time that we will invoke this function we need to have an api call but currently we do not have an api call so let's let's pretend that here we will have an api call and for the sake of this example we will create another function we will mimic of course the api and we will name it like user exists and the user exists will accept a username of type string and we will return an observable boolean so here what you have to do is return just like return a boolean value an observable boolean value definitely would not wouldn't like to have it like this we need to have some sort of logic and to do this i'm going to create here an array pretending that actually this one this this function will pretend an actual api call and what is the goal of the api call to send a username and return back whether this username exists in the back end or not exist in the database or not so let's say that we have here some standard usernames which will be just an array usernames and i will type john and jane so these are the usernames that already exist in the database now we will replace this one this of true with off these usernames includes and we will provide here this username and to have a better experience for our example we will also have a pipe with a delay of two thousand two seconds let's import this as well definitely not this let's import this as well okay so now here we have the user exist which is as we said previously an api call let's suppose that it's an api call and we have to use it to use this method will be like this user exists and now since we have this here the control we will provide in the user exists the control.value and we need to have now our logic the sync validators work like the following let's go again here and see the following that the sync validator return either a validation error or null which means that the validation error is no more than a key value pair and we have to return the key value pair in case the validator is not satisfied if the validator is satisfied we have to return null so let's close this and have our logic we need to have a map capture the response and we will have our logic like if i have response this means that the username already exists so i will return an object and i will name it like user exists true otherwise i will return true and this is what we have to return let me also close this in parenthesis and the missing part is the return type of the nested function so this nested function what returns is an observable of validation errors or null so this is what this function returns and now have to use this validator so what we're doing is the following that if i have response this means that the user name the provided username already exists so we have to return a key value pair just an object and in any other case we return null to use this we will utilize the third argument of the form control and we will provide this user validator as you can see we do not provide the control the control will be auto provided during the run time so let's see how this works if i type something for example john we have a delay and then we see that username already exists if i type jane we have a delay of two seconds after two seconds we see that username already exists and if i type something else we see that this is okay the missing part is to have here the spinner so let's add the spinner as well we need to go in the upcoming html and here apart from class is valid class is invalid we will also have one more class and this is going to be classes loading and the condition for this one for the is loading will be username pending so you might be wondering what this pending is all about so actually the pending is a getter as we can see a boolean getter and returns true if this controller is in the process of conducting a validation check false otherwise it's an excellent way to use this for async operators as sync validators to make sure that this is still loading so let's see what we currently have in the browser if i type john here we can see the spinner if i type jane again we can see here the spinner which is awesome this is what we wanted to do and the missing part here is that on the first load on the first render we still see that we have the red border and we still see that the username already exists we don't like to see the error message immediately so how can we fix this the problem is this class so we can do the following that i want to present i want to set the is invalid class if the username is invalid and also if the username has any errors user exists and what is this user exists let's go back in the code and it's this one and let's see what we have done we do not see the red border would not see the error message and if we type anything we can see the spinner and after a while we see the error and it will have something successful we can see the green check mark nice this is very cool and if you're wondering in terms of styling how we have achieved this there is loading is a class is loading and i have a spinner svg and i place it inside the input with background position as you can see the position is right with 8 pixel and center this is the result thanks for watching

Channel: Code Shots With Profanis

Views: 2,647

Keywords: Angular, Angular async validator, Forms, Reactive Forms, angular, angular async validator, angular forms, angular forms tutorial, angular tutorial, angular tutorial for beginners, async validator, reactive forms

Id: SoR3XhaKyTQ

Length: 12min 4sec (724 seconds)

Published: Sat Feb 13 2021