Async Validation with Angular Reactive Forms + Firebase
Ғылым және технология
Learn how to validate username uniqueness in Firebase with Angular Reactive Forms. We build a custom validator that checks the the Firestore DB for existing user records. angularfirebase.com/lessons/a...
- Reactive Forms - angular.io/guide/reactive-forms
- Firestore - stackoverflow.com/questions/4...
- AngularFire2 - github.com/angular/angularfire2
Пікірлер: 54
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
6 жыл бұрын
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
6 жыл бұрын
Your method works also. In this case the query should be fast either way because it's only sending one doc across the network.
I just love your videos. There is no other youtube channel who posts such quality Angular videos as you do :) God bless
@Fireship
6 жыл бұрын
Thank you!
Awesome picture, awesome voice, awesome explanation! Thank you!
Thank you so much!!! I struggled 8 hours to solve my problem and it turns out that I needed the `take` operator
@kylemooney203
3 жыл бұрын
same!...although I have to say it may have been a bit more than 8 hours xC
Nice!!!! Been waiting for this one! Thanks man!
@Fireship
6 жыл бұрын
Awesome, glad to hear that :)
@reyco1
6 жыл бұрын
The CustomValidator approach is super clean. Love it, man! Just makes sense.
thanks for sharing this one !
@Fireship
6 жыл бұрын
You bet, thanks for watching
Am I the only one who usually click on like before watching :)
@Fireship
6 жыл бұрын
Really appreciate that confidence! I try to make very video as awesome as possible :)
@danachim3748
6 жыл бұрын
me too :))
Thank you so much.. you save my day!
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.
wow, simply awesome
@Fireship
6 жыл бұрын
Thank you :)
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
You are the boss bro :) thanks!
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.
this guy haha, always saving me. Thanks!
Good talk
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.
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.
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
6 жыл бұрын
Good ideas, I've been thinking about doing a user profile pic lesson. Email verification would also make a good lesson.
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.
Can i ask for the tune you put in the beginning of each one of your videos ?
Hey AngularFirebase, what about making a video on proxy setting with Angular CLI..?
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:
I am building with AngularFireStorage Using List , i am not getting ref = > ref.where , there red swiggly lines in where?
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
6 жыл бұрын
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
6 жыл бұрын
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
6 жыл бұрын
You can only use one at a time, so use version 5, but code from past tutorials can still be useful
@champolot
6 жыл бұрын
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!..
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
5 жыл бұрын
Have you found solution to edit unique field validators?
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
6 жыл бұрын
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
6 жыл бұрын
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.
is this work with edit?
What's the Operating System you are using?
@Fireship
6 жыл бұрын
ubuntu
Which VS Code theme are you using?
@xenon4602
3 жыл бұрын
one dark