How to use Dependency Injection in Angular 6 export function

Question

I have tried this

export function uniqueUserNameValidation(commonsService: CommonsService): AsyncValidatorFn {
  return (c: AbstractControl): Promise < ValidationErrors | null > | Observable < ValidationErrors | null > => {
    return commonsService.uniqueUserName(c.value).pipe(
      map(data => {
        return data && data.status ? {
          'uniqueValidation': true
        } : null
      })
    )
  }
}

Common Services Method

uniqueUserName(name:string){
        return this.http.get<booleanData>(constDefault.API_URL+"/commons/nameAlreadyExist/"+name+"/Tank")
}

I am getting this error

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'uniqueUserName' of undefined TypeError: Cannot read property 'uniqueUserName' of undefined

You can't. Just write a regular service with a method that returns an AsyncValidatorFn. Or write that function directly in the component which needs it, and inject the service in the component. — JB Nizet
– JB Nizet, Commented Nov 26, 2018 at 10:43
@holydragon no. It's because the commonsService variable is undefined: Cannot read property 'uniqueUserName' of undefined. — JB Nizet
– JB Nizet, Commented Nov 26, 2018 at 10:52

John · Accepted Answer · 2018-11-26 17:40:42Z

1

Angular's automatic dependency injection only works for angular component constructors (which are being managed by the DI system).

As a solution to the specific problem shown in the question, you can inject the service into the component which will be calling the uniqueUserNameValidation and then pass the service as an argument to uniqueUserNameValidation. I think that, in general, this would be the preferred solution to your problem because it doesn't stray from standard angular practices.

Example

export class MyComponent {
  constructor(private commonsService: CommonsService, private fb: FormBuilder) {}

  ngOnInit() {
    const form = this.fb.group({
      name: ['', uniqueUserNameValidation(this.commonsService)]
    })
  }
}

answered Nov 26, 2018 at 17:40

John

10.2k7 gold badges51 silver badges80 bronze badges

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

Comments

Harun Yilmaz · Accepted Answer · 2018-11-26 14:22:44Z

0

I assume that your CommonsService is a proper Angular Service. If so, you could use Injector.

First import and declare the Injector in your module (app.module.ts etc.) and in the constructor of module init the instance:

import {Injector} from '@angular/core';

export let InjectorInstance: Injector;

...
...
...


export class AppModule {

  constructor(private injector: Injector) {
    InjectorInstance = this.injector;
  }
}

Then in your file that is exporting the function, import the variable from the module:

import {InjectorInstance} from 'path/to/app.module';

Then you can use the .get() method of Injector to get the service instance:

export function uniqueUserNameValidation(): AsyncValidatorFn {

  const commonsService = InjectorInstance.get<CommonsService>(CommonsService);

  return (c: AbstractControl): Promise < ValidationErrors | null > | Observable < ValidationErrors | null > => {
    return commonsService.uniqueUserName(c.value).pipe(
      map(data => {
        return data && data.status ? {
          'uniqueValidation': true
        } : null
     })
    )
  }
}

edited Nov 26, 2018 at 14:22

answered Nov 26, 2018 at 11:16

Harun Yilmaz

8,5793 gold badges30 silver badges40 bronze badges

8 Comments

Roshan Bagde Over a year ago

Now I am getting this error: TypeError: Cannot read property 'get' of undefined

Harun Yilmaz Over a year ago

It's my bad. I forgot to add init code in the constructor. Edited the answer.

user3362334 Over a year ago

@HarunYilmaz Hi, I added all the thins you specified and I get: "TypeError: Cannot read property 'get' of undefined". I have this in my AppModule: export class AppModule { constructor(private injector: Injector) { InjectorInstance = this.injector; } }. I have added this import in my ts file that has the export :import {InjectorInstance} from '../app.module'; And finally, I 'm using it in my export function like this: const translate = InjectorInstance.get<TranslateService>(TranslateService)

Harun Yilmaz Over a year ago

Hello @user3362334 Did you put export let InjectorInstance: Injector; in the app.module.ts file?

user3362334 Over a year ago

Yes, I put it below the imports

|

Collectives™ on Stack Overflow

How to use Dependency Injection in Angular 6 export function

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related