Após aplicar todas as alterações do validador assíncrono o navegador passou a apresentar o erro:
ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[UserNotTakenValidatorService -> UserNotTakenValidatorService -> UserNotTakenValidatorService]:
NullInjectorError: No provider for UserNotTakenValidatorService!
NullInjectorError: R3InjectorError(AppModule)[UserNotTakenValidatorService -> UserNotTakenValidatorService -> UserNotTakenValidatorService]:
NullInjectorError: No provider for UserNotTakenValidatorService!
Seguem classes:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { lowerCaseValidator } from 'src/app/shared/validators/lower-case.validator';
import { UserNotTakenValidatorService } from './user-not-taken.validator.service';
@Component({
templateUrl: './signup.component.html',
})
export class SignUpComponent implements OnInit {
signupForm: FormGroup;
constructor(private formBuilder: FormBuilder,
private userNotTakenValidationService: UserNotTakenValidatorService) { }
ngOnInit(): void {
this.signupForm = this.formBuilder.group({
email: [
'',
[
Validators.required,
Validators.email
]
],
fullName: [
'',
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(40)
]
],
userName: [
'',
[
Validators.required,
//Validators.pattern(/^[a-z]+[0-9]*$/),
lowerCaseValidator,
Validators.minLength(2),
Validators.maxLength(30)
],
this.userNotTakenValidationService.checkUserNameTaken()
],
password: [
'',
[
Validators.required,
Validators.minLength(8),
Validators.maxLength(14)
]
]
});
}
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
const API_URL: string = 'http://localhost:3000';
@Injectable({ providedIn: 'root' })
export class SignUpService {
constructor(private http: HttpClient) {}
checkUserNameTaken(userName: string) {
return this.http.get(API_URL + '/user/exists' + userName);
}
}
import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { debounceTime, switchMap, map, first } from 'rxjs/operators';
import { SignUpService } from './signup.service';
Injectable({ providedIn: 'root' })
export class UserNotTakenValidatorService {
constructor(private signUpService: SignUpService) { }
checkUserNameTaken() {
return (control: AbstractControl) => {
return control
.valueChanges
.pipe(debounceTime(300))
.pipe(switchMap(userName => this.signUpService.checkUserNameTaken(userName)))
.pipe(map(isTaken => isTaken ? { userNameTaken: true } : null))
.pipe(first());
}
}
}
Já revisei o código mas não consigo encontrar o erro! Estou certo que esqueci alguma coisa!