While working on an Angular form validation using an external service, I encountered a
cannot read property of undefinedThe component contains a simple form setup:
this.myForm = this.fb.group({
username: ['', [this.validator.username]],
});
Within this, the username method is being utilized:
@Injectable()
export class ValidatorService {
constructor(private auth: AuthService) {}
username(input: FormControl): {[key: string]: any} {
return { userInvalid: this.auth.validate(input.value) };
}
}
The ValidatorService makes use of a method that checks with the server to validate the username:
@Injectable()
export class AuthService {
validate(username: string): boolean {
return username !== 'demo';
}
}
However, an error has surfaced:
Cannot read property 'auth' of undefined