Angular 2 async form validator

Question

Actually I stuck in this problem.

I've created a custom async validator to check if a username ist taken or not. This is where I bind it:

 'name': ['',[Validators.required, Validators.minLength(4), Validators.minLength(4)], this.asyncName.bind(this)],

And this is my Validator:

asyncName(control: FormControl) {
    this.names$ = this.af.database.list('/usernames')
     .map (name => {
            name.filter(name => {
                if (name.name.toLowerCase() === control.value.toLowerCase()) {
                     console.log("Username taken");  
                     return {
                        valid: false
                    }; 
                } else {
                    console.log("Username available");
                    return {
                        valid: true
                    };
                }
            })
        });             

    return this.names$;
};

So this validator works. If the user name is taken it logs "Username taken" else "Username available".

My Problem: The return statement is not working. When I subscribe to the state of the form it would be still "Pending" and not "Valid" or "Invalid". Angular2 thinks the Validation is still running.

Does anyone know how to create valid return or resolve statement based on observables?

Maybe to subscribe by my self and do something with the resolve() function. But all my attempts were not working.

Thanks in advance!!!

Günter Zöchbauer · Accepted Answer · 2016-10-20 08:38:37Z

3

You can try .first() to ensure the observable closes after the first event:

asyncName(control: FormControl) {
    this.names$ = this.af.database.list('/usernames').first()
    .map(...

Not sure if this is the actual problem.

answered Oct 20, 2016 at 8:38

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wawka · Accepted Answer · 2017-09-29 11:17:03Z

0

I had similar problem. In my case, I had categories list and I wanted to check if a category name is unique or not. This is my validator:

export class CategoryFormComponent {
  constructor(
    private firebase: AngularFireDatabase
  ) {}
  
   categoryExists(control: AbstractControl) {
    return  this.firebase.database
        .ref(`categories/${this.uid}`) // user's uid
        .orderByChild('name')
        .equalTo(control.value)
        .once('value')
        .then((snapshot) => {
          return snapshot.val() ? { categoryExists: true } : null;
      });
  }
}

As you can see you can make search on database (more performant) and then use once which returns Promise.

answered Sep 29, 2017 at 11:17

wawka

5,2143 gold badges30 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 2 async form validator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related