1
resposta

Cadastro de usuário não esta funcionando

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
####################################
1 resposta

Olá, Marcos! Tudo bem?

Desculpa pela demora!

Eu vi que você concluiu o curso. Conseguiu resolver seu problema? Se sim, poderia compartilhar a solução para que outros alunos possam resolver problemas semelhantes?

Abraço!