Olá pessoal, tudo bem?
Estou aprendendo angular criando um projeto básico e uma das validações é assíncrona, ela funciona da seguinte forma, quando o usuário estiver cadastrando um novo usuário, ele irá validar se já existe em nossa API de usuários aquele userName, porém estou recebendo um erro no console e não consigo achar uma solução.
Erro do console
ERROR Error: Expected validator to return Promise or Observable.
at toObservable (forms.js:1145)
at Array.map (<anonymous>)
at FormControl._composedAsyncValidatorFn (forms.js:1134)
at FormControl._runAsyncValidator (forms.js:3026)
at FormControl.updateValueAndValidity (forms.js:3000)
at new FormControl (forms.js:3357)
at FormBuilder.control (forms.js:6698)
at FormBuilder._createControl (forms.js:6736)
at forms.js:6722
at Array.forEach (<anonymous>)
Meu novo-usuario.service
verificaUsuarioExistente(nomeUsuario: string){
return this.httpClient.get(`http://localhost:3000/user/exists/${nomeUsuario}`);
}
Meu service focado na validação
verificaUsuarioExistente(nomeUsuario: string){
return this.httpClient.get(`http://localhost:3000/user/exists/${nomeUsuario}`);
}
Meu novo-usuario component
ngOnInit(): void {
this.novoUsuarioForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
fullName: ['', [Validators.required]],
userName: ['', [minusculoValidator],[this.usuarioExistenteService.usuarioJaExiste()]],
password: [''],
});
}
Meu template onde estou aplicando
<app-mensagem
*ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente"
mensagem="Usuário já existente"
></app-mensagem>
Meu package.json
"dependencies": {
"@angular/animations": "~10.1.5",
"@angular/common": "~10.1.5",
"@angular/compiler": "~10.1.5",
"@angular/core": "~10.1.5",
"@angular/forms": "~10.1.5",
"@angular/platform-browser": "~10.1.5",
"@angular/platform-browser-dynamic": "~10.1.5",
"@angular/router": "~10.1.5",
"bootstrap": "^4.6.0",
"font-awesome": "^4.7.0",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.6",
"@angular/cli": "^10.1.5",
"@angular/compiler-cli": "~10.1.5",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}