0

I'm trying to implement an async validator in angular with devextreme components. For this, I defined a service with a function. Then I import this service into the appropriate component, define a property in the constructor and then call the function. But I get the error, that this.asyncval is undefined. Why?

Here is a stackblitz: https://stackblitz.com/edit/angular-dxpopup-et6z3y

Just click the new partner button, write some text in the name field and then hit tab and review the console.

derstauner
  • 1,478
  • 2
  • 23
  • 44

1 Answers1

0

The callback is bound in the template. So it might lose the reference to this keyword. Instead of a named function, you could use an anonymous function

export class ChildComponent {
  alreadyExists = (params) => this.asyncval.alreadyExists(params.value);
  ...
}

I've modified your Stackblitz.

ruth
  • 29,535
  • 4
  • 30
  • 57
  • Thank you again for your help. It works now as expected. And I learned the topics 'this' in connection with 'arrow functions'. – derstauner Jun 18 '20 at 05:48