o service.ts
import { Injectable } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { NovoUsuarioService } from './novo-usuario.service';
import { first, map, switchMap } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class UsuarioExisteService {
constructor(private novoUsuarioService: NovoUsuarioService) { }
usuarioJaExite() {
return (control: AbstractControl) => {
return control.valueChanges.pipe(
switchMap((nomeUsuario) =>
this.novoUsuarioService.verificaUsuarioExistente(nomeUsuario)
),
map((usuarioExiste) => usuarioExiste ? { usuarioExistente: true } : null),
first()
);
};
}
}
o html
<h4 class="text-center">Registre-se e mostre seu pet ao mundo!</h4>
<form class="form mt-4" [formGroup]="novoUsuarioForm" (submit)="cadastrar()">
<div class="form-group">
<input placeholder="e-mail" class="form-control" formControlName="email" />
<app-mensagem
*ngIf="
novoUsuarioForm.get('email')?.errors?.required &&
novoUsuarioForm.get('email')?.touched
"
mensagem="E-mail obrigatório"
>
</app-mensagem>
<app-mensagem
*ngIf="
novoUsuarioForm.get('email')?.errors?.email &&
novoUsuarioForm.get('email')?.touched
"
mensagem="E-mail no formato incorreto"
>
</app-mensagem>
</div>
<div class="form-group">
<input
placeholder="Nome Completo"
class="form-control"
formControlName="fullName"
/>
<app-mensagem
*ngIf="
novoUsuarioForm.get('fullName')?.errors &&
novoUsuarioForm.get('fullName')?.touched
"
mensagem="Nome incorreto"
>
</app-mensagem>
</div>
<div class="form-group">
<input
placeholder="Usuário"
class="form-control"
formControlName="userName"
/>
<app-mensagem
*ngIf="
novoUsuarioForm.get('userName')?.errors?.minusculo &&
novoUsuarioForm.get('userName')?.touched
"
mensagem="Usuário deve ser em letra minúscula"
>
</app-mensagem>
<app-mensagem
*ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente &&
novoUsuarioForm.get('userName')?.errors?.touched
"
mensagem="Usuário já existe"
></app-mensagem>
</div>
<div class="form-group">
<input
type="password"
placeholder="Senha"
class="form-control"
formControlName="password"
/>
<app-mensagem
*ngIf="novoUsuarioForm.errors?.senhaIgualUsuario"
mensagem="Senha deve ser diferente do usuário"
>
</app-mensagem>
</div>
<button class="btn btn-primary btn-block">Cadastro</button>
</form>
<p>Já um usuário? <a [routerLink]="['']"> Faça Login</a></p>
