CODEWITHSUNDEEP
angulartypescriptfirebase
jrocc
jrocc

Reputation: 1346

Ionic Firebase Angular Async validation

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();
    }
  }
}

Upvotes: 0

Views: 125

Answers (1)

casieber
casieber

Reputation: 7542

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.

Upvotes: 1

Related Questions