Vi diversos posts com um desses problemas, mas nenhum deles solucionou o meu caso.
Apresenta primeiro o erro abaixo:
ERROR TypeError: Cannot read properties of undefined (reading 'pipe')
at usuario-existe.service.ts:15:35
at forms.js:1190:1
at Array.map (<anonymous>)
at executeValidators (forms.js:1190:1)
at FormControl._composedAsyncValidatorFn (forms.js:1165:1)
at FormControl._runAsyncValidator (forms.js:3057:1)
at FormControl.updateValueAndValidity (forms.js:3031:1)
at new FormControl (forms.js:3388:1)
at FormBuilder.control (forms.js:6731:1)
at FormBuilder._createControl (forms.js:6769:1)Daí edito a linha abaixo colocando o ? e o erro muda para o que vem a seguir:
return control.valueChanges?.pipe(
Erro alterado:
core.js:4442 ERROR Error: Expected validator to return Promise or Observable.
at toObservable (forms.js:1176:1)
at Array.map (<anonymous>)
at FormControl._composedAsyncValidatorFn (forms.js:1165:1)
at FormControl._runAsyncValidator (forms.js:3057:1)
at FormControl.updateValueAndValidity (forms.js:3031:1)
at new FormControl (forms.js:3388:1)
at FormBuilder.control (forms.js:6731:1)
at FormBuilder._createControl (forms.js:6769:1)
at forms.js:6755:1
at Array.forEach (<anonymous>)Abaixo segue o arquivo usuario-existe.service.ts
import { AbstractControl } from '@angular/forms';
import { NovoUsuarioService } from './novo-usuario.service';
import { Injectable } from '@angular/core';
import { first, map, switchMap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UsuarioExisteService {
constructor(private novoUsuarioService: NovoUsuarioService) { }
usuarioExiste(){
return (control: AbstractControl) => {
return control.valueChanges?.pipe(
switchMap(
(nomeUsuario) => this.novoUsuarioService.verificaUsuarioExistente(nomeUsuario)
),
map(
(usuarioExiste) => usuarioExiste?{ usuarioExistente: true }:null
),
first()
);
}
}
} Segue o arquivo novo-usuario.component.ts
import { UsuarioExisteService } from './usuario-existe.service';
import { Router } from '@angular/router';
import { NovoUsuarioService } from './novo-usuario.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NovoUsuario } from './novo-usuario';
import { minusculoValidator } from './minusculo.validator';
@Component({
selector: 'app-novo-usuario',
templateUrl: './novo-usuario.component.html',
styleUrls: ['./novo-usuario.component.css']
})
export class NovoUsuarioComponent implements OnInit {
novoUsuarioForm!: FormGroup;
constructor(
private formBuilder: FormBuilder,
private userService: NovoUsuarioService,
private router: Router,
private usuarioExiste: UsuarioExisteService
) { }
ngOnInit(): void {
this.novoUsuarioForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
fullName: ['', [Validators.required, Validators.minLength(4)]],
userName: [
'',
[minusculoValidator],
[this.usuarioExiste.usuarioExiste()]
],
password: ['']
})
}
cadastrar(){
const novoUsuario = this.novoUsuarioForm.getRawValue() as NovoUsuario;
console.log(novoUsuario);
this.userService.cadastraNovoUsuario(novoUsuario)
.subscribe(
() => {
this.router.navigate(['']);
},
(error) => {
alert('Erro no cadastro de novo usuário.');
console.error(error)
}
);
}
}
