Async Validation with Angular Reactive Forms + Firebase

[@Fireship]

My goal with this video is to give you an async validator for your reactive forms that works with virtually any backend data source. Get in touch on Slack if you want to chat about it :)

[@mediantiba]

Thanks for the video. I did a similar task for my previous project, the only different thing is that I kept usernames in a separate root collection. I see your query worked fine even though usernames are scoped under their corresponding user document.

[@Fireship]

Your method works also. In this case the query should be fast either way because it's only sending one doc across the network.

[@biovawan]

Thank you so much!!! I struggled 8 hours to solve my problem and it turns out that I needed the `take` operator

[@kylemooney203]

same!...although I have to say it may have been a bit more than 8 hours xC

[@ajinkyax]

I just love your videos. There is no other youtube channel who posts such quality Angular videos as you do :) God bless

[@Fireship]

Thank you!

[@elecktromaestimmy]

Here I'm trying to validate aysnc in sync ... busted my head for 4 hours over that before I took a closer look at that damn comma !! great video thou, I know they say Angular is dieing but I guess I'm going down with this ship

[@DimanIvanov]

Awesome picture, awesome voice, awesome explanation! Thank you!

[@Mohammed24441]

There is a logical error in your code. When you used the rxjs operator debounceTime(), you meant not to call the external resource till a 500 ms delay of the user input without being interrupted but what your code is doing is rejecting emitted values from the external resource, which actually won't happen as Firebase will only send one response, not from username FormControl valueChanges event. If you do a ** tap(()=>console.log('external call')) ** after the take(1) operator, you will notice that it will log every time there is a value change after passing the synchronous validators. Also, you should pass the custom async validator as a third asynchronous argument, not as a second synchronous argument.

[@razakadam74]

Am I the only one who usually click on like before watching :)

[@Fireship]

Really appreciate that confidence! I try to make very video as awesome as possible :)

[@MarioDragonu]

me too :))

[@juanpablovillegasgomez33]

There is a problem, when you see on network in developer tools, the request is made to the firestore service every time the user changes the input value.

[@marcel5235]

Is there any option how to minimize the actual number of request to firebase? I am new to this, but I think that angular if you use Service (in case of httpClient) and DI on async validator can cancel network request if you type fast, in this case, there will be certainly a way to not send post requests to firebase, I thought that is the reason of that debounce operator. Still, you can add synchronous validators as well, and this will at least with minLength, and pattern/email format ensure that async validator will stream data only when synch validators are resolved as null. What is concerns me is that this can turn into really unnecessary expensive usage of firebase if done incorrectly.

[@reyco1]

Nice!!!! Been waiting for this one! Thanks man!

[@Fireship]

Awesome, glad to hear that :)

[@reyco1]

The CustomValidator approach is super clean. Love it, man! Just makes sense.

[@DanielRLuke]

Very useful. That said, I keep wondering about how to do more general validation via the server for user input. They always say never to trust what comes through on the client, but I have yet to see any tutorials about how to do server-side validation.

[@uwspstar2008]

thanks for sharing this one !

[@Fireship]

You bet, thanks for watching

[@bigk9000]

Hey, Mr. Fireship, I enjoy your content, but I was wondering if you currently have or plan to have videos going over the many features in NRWL. I complained about the sparse documentation and the small community for it on another one of your video that went over its basic overview -- admittedly, I had been struggling with a NRWL-related issues for a couple of days when I had -- but I still think it's a great tool and would love to learn more about it, such as the best design pattern practices and the best means of integrating it with Firebase. If you ever see this comment, please let me know.

[@eqdatshit8406]

Can i ask for the tune you put in the beginning of each one of your videos ?

[@juanwang4270]

Can this apply to ionic? if can, where should i make major change on it? I found the html quite different please help a lowly beginner here D:

[@elaith9]

Which VS Code theme are you using?

[@Xenon77x]

one dark

[@FernandoFerrufinoDuran]

You are the boss bro :) thanks!

[@ddougher1]

After submitting a valid username and updating the current users document, the form control remains in an invalid state. Marking the control as Pristine or doing a form reset does not reset the form or control to valid. Does anyone know how to correct this condition? onSubmit() { if (this.usernameForm.status != 'VALID') { console.log('Form is not valid, document not saved to database') return } this.usernameForm.patchValue({ updatedOn: this.timestamp() }) const data = this.usernameForm.value; this.usernameDoc.update(data); this.usernameForm.controls.username.markAsPristine(); this.usernameForm.reset(); }

[@adrienmbiandji8282]

Have you found solution to edit unique field validators?

[@ameyranavade]

Thank you so much.. you save my day!

[@Z3R01d]

wow, simply awesome

[@Fireship]

Thank you :)

[@champolot]

Hi there, I just got started to learn angular and the latest version is angular 5. Can i ask what month did you start creating video about angular 5. I'm asking this so that i can avoid the angular 4 tutorials in your channel. Hope you'll reply Thank you!

[@Fireship]

Welcome to the channel :). Angular 4 and 5 are compatible in almost every way, so that might not be a good way to filter, but I started with 5 as soon as it was an official release back in October 2017.

[@champolot]

THANKS FOR THE FAST RESPONSE. Oh that's great. So starting from October,. your videos are continuous angular 5? Uhmmmm...Does it mean its fine to use angular 4 and 5 the same time? What i mean is that its fine to use both in one project.

[@Fireship]

You can only use one at a time, so use version 5, but code from past tutorials can still be useful

[@champolot]

Oooohhh....I'm looking forward to learn a lot from your channel. Thank God I saw your channel and it got a lot of angular tutorials...AWESOME! BIG THUMBS UP FOR YOU CHANNEL BRO!..

[@VinsysVlogs]

Hey AngularFirebase, what about making a video on proxy setting with Angular CLI..?

[@JeffrinJ]

What's the Operating System you are using?

[@Fireship]

ubuntu

[@webr]

this guy haha, always saving me. Thanks!

[@elechandroxxx23]

is this work with edit?

[@wesvdl1995]

Thank you! Can you someday make a video about the email/password login in firebase + email verification + changing user data after login (and adding a profile picture to storage in firebase) :D

[@Fireship]

Good ideas, I've been thinking about doing a user profile pic lesson. Email verification would also make a good lesson.

[@denisy87]

Isn’t it problematic that someone could get the email addresses connected to the username by simple brutforce? Meaning: is there a way to get only an response from Firebase if the username is taken or not without the full user object? __ Edit: great videos by the way!

[@Fireship]

You bring up a good point there. As far as I can tell, the only solution would be to denormalize usernames into their own collection. That's actually what I did in a past lesson with RTDB angularfirebase.com/lessons/custom-usernames-with-firebase-authentication-and-angular/#Modeling-the-Username-Data

[@denisy87]

Ah, that looks great, thank! I just thought about it might also work using Firebase Functions. This way, you could event check for malicious request.

[@theobellash6440]

Good talk