No vídeo ao clicar no bota de cadastrar o cadastro é efetuado, já no meu não funciona, e aparentemente o código é o mesmo
Formulário
<h4 class="text-center mt-4">Registre-se e mostre seu pet ao mundo!</h4>
<form
action=""
class="form mt-4 d-flex flex-column"
[formGroup]="novoUsuarioForm"
(submit)="cadastrar()"
>
<div class="form-group">
<input
type="text"
placeholder="e-mail"
class="form-control mb-3"
formControlName="email"
/>
<app-mensagem
*ngIf="
novoUsuarioForm.get('email')?.errors?.required &&
novoUsuarioForm.get('email')?.touched
"
mensagem="Email 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 mb-3"
formControlName="fullName"
/>
<app-mensagem
*ngIf="
novoUsuarioForm.get('fullName')?.errors?.required &&
novoUsuarioForm.get('fullName')?.touched
"
mensagem="Nome incorreto"
></app-mensagem>
</div>
<div class="form-group">
<input
type="text"
placeholder="Usuário"
class="form-control mb-3"
formControlName="userName"
/>
<app-mensagem
*ngIf="
novoUsuarioForm.get('userName')?.errors?.minusculo &&
novoUsuarioForm.get('username')?.touched
"
mensagem="Usuário dever conter apenas letras minúsculas"
></app-mensagem>
<app-mensagem
*ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente"
mensagem="Usuário já existe"
></app-mensagem>
</div>
<div class="form-group">
<input
type="password"
placeholder="Senha"
class="form-control mb-3"
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]="['']">Efetue seu login</a></p>
novo-usuario.component
import { Router } from '@angular/router';
import { NovoUsuarioService } from './novousuario.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NovoUsuario } from './novo-usuario';
import { minusculoValidator } from './minusculo.validator';
import { UsuarioExisteService } from './usuario-existe.service';
import { usuarioSenhaIguaisValidator } from './usuario-senha-iguais.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 novoUsuarioService: NovoUsuarioService,
private usuarioExisteService: UsuarioExisteService,
private router: Router
) {}
ngOnInit(): void {
this.novoUsuarioForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
fullName: ['', Validators.required, Validators.minLength(4)],
userName: [
'',
[minusculoValidator],
[this.usuarioExisteService.usuarioJaExiste()],
],
password: [''],
},
{
validators: [usuarioSenhaIguaisValidator],
}
);
}
cadastrar() {
if (this.novoUsuarioForm.valid) {
const novoUsuario = this.novoUsuarioForm.getRawValue() as NovoUsuario;
this.novoUsuarioService.cadastraNovoUsuario(novoUsuario).subscribe(() => {
this.router.navigate(['']);
},
(error) => {
console.log(error);
}
);
}
}
}
acredito que o responsável por esse problema seja a api já que no console da api está sendo exibido a seguinte mensagem
> gatitobook@1.0.0 start /home/studyprofile/Wokspace/frond-end/angular_formularios-main/api
> node server.js
Servidor escutando na porta: 3000
Users
{
user_id: 1,
user_name: 'alvaro',
user_email: 'alvaro@gatitobook.com.br',
user_password: 12345678,
user_full_name: 'Alvaro',
user_join_date: '2020-10-23 00:07:07'
}
####################################
No token is send by the the application
####################################