Attempting to utilize an injected dependency within a static method poses a challenge, especially if the injected dependency is instance-scoped and cannot be accessed within the static method.
Below is an example class:
@Injectable()
export class PasswordValidationService {
constructor(private userAccountService:UserAccountService) {
}
static passwordValidator(control:AbstractControl) {
return control
.valueChanges
.debounceTime(400)
.switchMap(()=> this.userAccountService.checkCurrentPassword(control.value))
.map(res=> {
if (res.json() === true) {
return null;
}
else {
return {invalid: true};
}
}
);
}
}
The question arises on what could be considered best practice when attempting to utilize the UserAccountService (dependency) within a static method?
edit: The approach was modified to favor instance methods over static methods as illustrated below:
Here is the revised validator:
import {Injectable} from "@angular/core";
import {UserAccountService} from "../../useraccount/useraccount.service";
import {AbstractControl} from "@angular/common";
import {Observable} from "rxjs/Observable";
@Injectable()
export class PasswordValidationService {
constructor(private userAccountService:UserAccountService) {
}
passwordValidator(control:AbstractControl):Observable<any> {
let validationResult = this.userAccountService.checkCurrentPassword(control.value)
.map(res=> {
if (res.json() === true) {
return null;
}
else {
return {invalid: true};
}
}
);
return validationResult;
}
}
Review the component utilizing the updated validator:
constructor(private router:Router,
private formBuilder:FormBuilder,
private stylingService:StylingService,
private sessionService:SessionService,
private passwordValidationService:PasswordValidationService) {
}
ngOnInit() {
this.signinForm = this.formBuilder.group({
credentials: this.formBuilder.group({
username: [this.credentials.username, Validators.required],
password: [this.credentials.password, [Validators.required, this.passwordValidationService.passwordValidator]]
})
});
}
An error message persists which states:
browser_adapter.ts:82 TypeError: Cannot read property 'userAccountService' of undefined
at PasswordValidationService.passwordValidator (http://localhost:8080/app/shared/services/password-validation.service.js:18:36)
at eval (http://localhost:8080/vendor/@angular/forms/src/validators.js:137:49)
at Array.map (native)
at _executeValidators (http://localhost:8080/vendor/@angular/forms/src/validators.js:137:23)
at FormControl.eval [as validator] (http://localhost:8080/vendor/@angular/forms/src/validators.js:116:33)
at FormControl.AbstractControl._runValidator (http://localhost:8080/vendor/@angular/forms/src/model.js:178:56)
at FormControl.AbstractControl.updateValueAndValidity (http://localhost:8080/vendor/@angular/forms/src/model.js:164:29)
at new FormControl (http://localhost:8080/vendor/@angular/forms/src/model.js:304:14)
at FormBuilder.control (http://localhost:8080/vendor/@angular/forms/src/form_builder.js:36:16)
at FormBuilder._createControl (http://localhost:8080/vendor/@angular/forms/src/form_builder.js:68:25)