5
respostas

Dúvida RouterLink

Bom dia, estou fazendo a tela de cadastro, fiz o routerLink como mostrado, porém, além de no navegador não aparecer como item clicável, também não é reconhecida a rota e tenho o seguinte erro no console:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/novousuario/%5B''%5D' Error: Cannot match any routes. URL Segment: 'home/novousuario/%5B''%5D'

5 respostas
<h4 class="text-center">Registre-se e mostre seu pet ao mundo!</h4>

<form class = "form mt-4" action="" [formGroup]= 'novoUsuarioForm' (submit)='cadastrar()'>
  <div class="form-group">
    <input class = 'form-control' type="text" placeholder="e-mail" 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 class = 'form-control' type="text" placeholder="Nome Completo" formControlName ='fullName'>
  </div>
  <div class="form-group">
    <input class= 'form-control' type="text" placeholder="Usuário" formControlName = 'userName'>
    <app-mensagem
    *ngIf="novoUsuarioForm.get('userName')?.errors?.minusculo && novoUsuarioForm.get('userName')?.touched"
    mensagem = "Usuário deve ser com letras minúsculas"
    ></app-mensagem>
    <app-mensagem
    *ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente"
    mensagem = " Usuário já cadastrado"
    ></app-mensagem>
  </div>

  <div class="form-group">
    <input class = 'form-control' type="password" placeholder="Senha" formControlName ='password'>
  </div>

  <button class="btn btn-primary">Cadastro</button>
</form>
<p>Já é um usuário? <a [routerLink]="['']">Faça Login</a></p>

Registre-se e mostre seu pet ao mundo!

Já é um usuário? Faça Login

Fala ai Diego, tudo bem? Você configurou o sistema de módulos na aplicação? Outro detalhe, tente abrir o console do navegador para verificar se não está aparecendo nenhum erro no mesmo.

Espero ter ajudado.

Opa, fala Matheus, td certo e ctg? Cara, configurei sim nos modulos, olhei o console e está dando algum erro de criação de formulário. Eu segui como no tutorial, não estou conseguindo encontrar onde errei.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { NovoUsuario } from './novo-usuario';
import { NovoUsuarioService } from './novo-usuario.service';
import { validaMinusculo } 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 {

  // o !: em novoUsuarioForm é para mostrar que o formulario pode ser nulo ou não.

  novoUsuarioForm!: FormGroup;
  defaultValue: any;

  constructor(private formBuilder: FormBuilder,
              private novoUsuarioService: NovoUsuarioService,
              // private router: Router,
              private usuarioExisteService: UsuarioExisteService) { }

  ngOnInit(): void {

    this.novoUsuarioForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      fullName: ['', [Validators.required, Validators.minLength(4)]],
      userName: ['', [validaMinusculo], [this.usuarioExisteService.usuarioJaExiste()]],
      password: [''],
    },
    {validators: [usuarioSenhaIguaisValidator]});

  }

  cadastrar(){
    console.log(this.novoUsuarioForm.getRawValue);
  }


}


erro do console :
RROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

Fala Diego, olhando os códigos:

<div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

Você precisa passar o FormGroup para o formulário e não div e em vez de criá-lo manualmente com new FormGroup tu pode usar o FormBuilder através da função group.

Espero ter ajudado.