Angular 6 - Using a function outside the scope with a callback function

Question

I'm using DevExtreme components, and this is where the callback function gets called in the html:

<dxi-validation-rule type="custom"
     [validationCallback]="validationCallback"
     message="Email exists">
</dxi-validation-rule>

In the ts file:

validationCallback (e)  {
  const x = this.userService.getUserByEmail(e.value);
  x.subscribe(ref => ref.email != null ? true : false);
  return x;
}

Service code:

getUserByEmail(email: string): Observable<User> {
  return this.afs
    .collection<User>('users', ref => ref.where('email', '==', email))
    .snapshotChanges()
    .map(
      users => {
        const user = users[0];
        if (user) {
          const data = user.payload.doc.data() as User;
          const id = user.payload.doc.id;
          console.log('found: ' + data.email);
          return { id, ...data };
        } else {
          return null;
        }
      }
    );
}

Problem with that code is that I get:

Cannot read property 'getUserByEmail' of undefined

Basically means I'm trying to access this.userService which is out of the function's scope. How would I be able to access an external function to validate e-mail in this situation?

Using the constructor, `constructor(private userService: UserService){ }` — Rosenberg, Aug 11 '19 at 02:53
Try defining `validationCallback` as an arrow function: `validationCallback = (e) => { ... }`. — ConnorsFan, Aug 11 '19 at 03:04

Muhammed Albarmavi · Answer 1 · 2019-08-11T02:36:30.377

1

may be a one way to do it by create a method that return an arrow function then set getUserByEmail to that arrow function this way you will obtain a reference to this object

public getUserByEmail;

ngOnInit() {
 this.getUserByEmail = getUserByEmailFactory();
}

getUserByEmailFactory() {

  return  (email: string) => {
    return this.afs
      .collection<User>('users', ref => ref.where('email', '==', email))
      .snapshotChanges()
      .map(
        users => {
          const user = users[0];
          if (user) {
            const data = user.payload.doc.data() as User;
            const id = user.payload.doc.id;
            console.log('found: ' + data.email);
            return { id, ...data };
          } else {
            return null;
          }
        }
      );
  }

}

you can an afs to getUserByEmailFactory then the return function will have a closure then you will no longer need to use this

public getUserByEmailFactory(afs){
 ...
}

ngOnInit() {
  this.getUserByEmail = getUserByEmailFactory(this.afs);
}

or can be like this

public getUserByEmail = () => { ... }

arrow function

edited Aug 11 '19 at 02:36

answered Aug 11 '19 at 02:25

Muhammed Albarmavi

23,240
8
66
91

Should I add that arrow function inside user.service or register.component.ts ? – Rosenberg Aug 11 '19 at 02:57
Inside the `register.component.ts` component – Muhammed Albarmavi Aug 11 '19 at 03:03
Wouldn't that defeat the purpose of using user.service though? Since you're calling afs from inside register.component – Rosenberg Aug 11 '19 at 03:05
also can be done inside the service by create a `getUserByEmailFactory` `validationCallback (e) { const x = this.userService.getUserByEmailFactory()(e.value); x.subscribe(ref => ref.email != null ? true : false); return x; }` – Muhammed Albarmavi Aug 11 '19 at 03:06

Angular 6 - Using a function outside the scope with a callback function

1 Answers1