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

  • @Fireship
    @Fireship6 жыл бұрын

    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

    @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

    @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.

  • @ajinkyax
    @ajinkyax6 жыл бұрын

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

  • @Fireship

    @Fireship

    6 жыл бұрын

    Thank you!

  • @DimanIvanov
    @DimanIvanov5 жыл бұрын

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

  • @biovawan
    @biovawan4 жыл бұрын

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

  • @kylemooney203

    @kylemooney203

    3 жыл бұрын

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

  • @reyco1
    @reyco16 жыл бұрын

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

  • @Fireship

    @Fireship

    6 жыл бұрын

    Awesome, glad to hear that :)

  • @reyco1

    @reyco1

    6 жыл бұрын

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

  • @uwspstar2008
    @uwspstar20086 жыл бұрын

    thanks for sharing this one !

  • @Fireship

    @Fireship

    6 жыл бұрын

    You bet, thanks for watching

  • @razakadam74
    @razakadam746 жыл бұрын

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

  • @Fireship

    @Fireship

    6 жыл бұрын

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

  • @danachim3748

    @danachim3748

    6 жыл бұрын

    me too :))

  • @ameyranavade
    @ameyranavade4 жыл бұрын

    Thank you so much.. you save my day!

  • @Mohammed24441
    @Mohammed244414 жыл бұрын

    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.

  • @Z3R01d
    @Z3R01d6 жыл бұрын

    wow, simply awesome

  • @Fireship

    @Fireship

    6 жыл бұрын

    Thank you :)

  • @elecktromaestimmy
    @elecktromaestimmy4 жыл бұрын

    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

  • @FernandoFerrufinoDuran
    @FernandoFerrufinoDuran3 жыл бұрын

    You are the boss bro :) thanks!

  • @DanielRLuke
    @DanielRLuke6 жыл бұрын

    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.

  • @webr
    @webr2 жыл бұрын

    this guy haha, always saving me. Thanks!

  • @theobellash6440
    @theobellash64403 жыл бұрын

    Good talk

  • @bigk9000
    @bigk90003 жыл бұрын

    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.

  • @juanpablovillegasgomez33
    @juanpablovillegasgomez335 жыл бұрын

    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.

  • @wesvdl1995
    @wesvdl19956 жыл бұрын

    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

    @Fireship

    6 жыл бұрын

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

  • @marcel5235
    @marcel52354 жыл бұрын

    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.

  • @eqdatshit8406
    @eqdatshit84066 жыл бұрын

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

  • @reach_perumal
    @reach_perumal6 жыл бұрын

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

  • @juanwang4270
    @juanwang42706 жыл бұрын

    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:

  • @dualvideoviralguytalksincar
    @dualvideoviralguytalksincar5 жыл бұрын

    I am building with AngularFireStorage Using List , i am not getting ref = > ref.where , there red swiggly lines in where?

  • @champolot
    @champolot6 жыл бұрын

    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

    @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

    @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

    @Fireship

    6 жыл бұрын

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

  • @champolot

    @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!..

  • @ddougher1
    @ddougher16 жыл бұрын

    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

    @adrienmbiandji8282

    5 жыл бұрын

    Have you found solution to edit unique field validators?

  • @denisy87
    @denisy876 жыл бұрын

    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

    @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

    @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.

  • @elechandroxxx23
    @elechandroxxx235 жыл бұрын

    is this work with edit?

  • @JeffrinJ
    @JeffrinJ6 жыл бұрын

    What's the Operating System you are using?

  • @Fireship

    @Fireship

    6 жыл бұрын

    ubuntu

  • @elaith9
    @elaith95 жыл бұрын

    Which VS Code theme are you using?

  • @xenon4602

    @xenon4602

    3 жыл бұрын

    one dark

Келесі