Ionic Firebase Angular Async validation

Question

I'm trying to set up validation so if the username is taken a new user cant signup with the same username. I'm getting an error cant find afDatabase this is occurring in the username.ts. It cant find the FirebaseDatabase that is defined in the constructor. Why is this happening? Thanks for the help.

Cannot read property 'afDatabase' of undefined

username.ts

import { FormControl } from '@angular/forms';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';

export class UsernameValidator {

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase) {

  }
  static checkUsername(control: FormControl): any {
    return new Promise(resolve => {
        if(this.afDatabase.orderByChild('username').equals(control.value)){
          resolve({
            "username taken": true
          });
        }else{
          resolve(null);
        }
    });
  }
}

profile-setup.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators} from '@angular/forms';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';

import { Profile } from './../../models/profile';
import { UsernameValidator } from  '../../validators/username';

@IonicPage()
@Component({
  selector: 'page-profile-setup',
  templateUrl: 'profile-setup.html',
})
export class ProfileSetupPage {
  profile = {} as Profile;

  profileForm: FormGroup;

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController,
    public navParams: NavParams, public formBuilder: FormBuilder, public toastCtrl: ToastController) {

      this.profileForm = formBuilder.group({
        username: ['', Validators.compose([Validators.required]), UsernameValidator.checkUsername]
      });
  }

  createProfile(){
    if(this.profileForm.valid){
      this.afAuth.authState.take(1).subscribe(auth => {
        this.afDatabase.object(`profile/${auth.uid}`).set(this.profile)
          .then(() => this.navCtrl.setRoot('TabsPage'))
      })
    }else if (!this.profileForm.controls.username.valid){
      let toast = this.toastCtrl.create({
        message: 'Invalid Username',
        duration: 3000,
        position: 'bottom'
      });
      toast.present();
    }
  }
}

casieber · Accepted Answer · 2018-01-14 06:04:47Z

1

In your UsernameValidator class you have defined the checkUsername method as static, meaning it can't be tied to a specific instance of the class. However, you are using this.afDatabase inside of this method, which has to come from a specific instance of the class.

And so, your implementation of checkUsername is contradicting with the fact that you've defined it as static. Try resolving this contradiction and see if that fixes the issue.

answered Jan 14, 2018 at 6:04

casieber

7,6222 gold badges23 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Ionic Firebase Angular Async validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related