Erro no minLenght do fullName

Olá Edgard, tudo bom?

O método formGroup vai pegar cada elemento do formulário passado no nosso template para o formControlName, e passar alguns parâmetros como configuração de controle para ele. Como é feito no novo-usuario.component.ts:

this.novoUsuarioForm = this.formBuilder.group(
      {
        email: [ '', [Validators.required, Validators.email]],
        fullName: [ '', [
            Validators.required,
            Validators.minLength(4),
            Validators.maxLength(255),],
        ],
        . . .

O primeiro argumento para o FormControl é o valor inicial é o segundo é uma lista de validadores, e o erro é como se tivesse alguma validação não esperada nessa lista.

Dá uma olhada na palavra length, verifica se foi digitado certinho. Isso é muito comum.

Caso o erro continue, compartilha seu código para entender melhor o que está acontecendo.

Bons estudos, Edgard.

DIEGO CARLOS MARTINS GAYOSO, segui sua orientação e deu certo. De ante mão te agradeço pela ajuda, mas queria aproveitar o gancho dessa duvida e tirar outra do mesmo problema no mesmo arquivo em relação ao campo "password". Que validação uso para aceitar caracteres maiusculo e minusculo, caracteres e numeros. Vou lhe passar o print da versão do angular/cli que estou usando e logo em seguida te passo o código do novo-usuario.component.ts e novo-usuario.component.html.

Desde já agradeço.

Registre-se e mostre seu pet ao mundo!

Já é usuário? Faça login!

Olá Edgard, tudo bem?

O meio que encontrei foi o de criar uma função que cria um validador. Vamos criar um arquivo dentro da pasta de novo-usuario chamado validador-personalizado.validator.ts. Criaremos uma função que cria um validador tipando ele como ValidatorFn.

export function validadorSenha(): ValidatorFn {

}

Essa função deve retornar ou objeto de erro do tipo ValidationErrors caso tenha alguma das validações não aplicada, caso todas as regras forem cumpridas essa função retorna null.

import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';

export function validadorSenha(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {

    }
}

Vamos pegar o valor do campo do formControl por meio da instância da sua classe base, AbstractControl. Com ele conseguimos usar a propriedade value e fazer as validações.

import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';

export function validadorSenha(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {
        const senha = control.value;

        if(!senha) {
            return null;
        }
    }
}

Podemos primeiro verificar se senha é falso, caso seja já vamos retornar como null e não fazer nada pois precisamos que tenha alguma string na senha, certo?

Caso tenha algo podemos fazer com que a senha seja testado em expressões regulares. No caso farei de letra minúscula, maiúscula e de numeral. Em seguida vou adicionar todas esses testes em uma propriedade

import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';

export function validadorSenha(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {
        const senha = control.value;

        if(!senha) {
            return null;
        }

        const temMaiusculo = /[A-Z]+/.test(senha);

        const temMinusculo = /[a-z]+/.test(senha);

        const temNumeral = /[0-9]+/.test(senha);

        const senhaValida = temMaiusculo && temMinusculo && temNumeral;
    }
}

Executando o teste para saber se a expressão regular é aplicada na senha a sua propriedade vai receber um valor booleano, com isso podemos fazer com que a função retorne null caso o retorno de senhaValida for true ou retornar o objeto de erros.

export function validadorSenha(): ValidatorFn {
    return (control:AbstractControl) : ValidationErrors | null => {
        const senha = control.value;

        if(!senha) {
            return null;
        }

        const temMaiusculo = /[A-Z]+/.test(senha);

        const temMinusculo = /[a-z]+/.test(senha);

        const temNumeral = /[0-9]+/.test(senha);

        const senhaValida = temMaiusculo && temMinusculo && temNumeral;

        return !senhaValida ? { senhaForte: true } : null;
    }
}

Caso a senha por exemplo, não tivesse letra maiúscula, o retorno do objeto seria assim:

{
    senhaForte: {
      temMaiusculo: false,
      temMinusculo: true,
      temNumeral: true
    }
}

Com o validador pronto, vamos chamar ele na lista de validadores do formBuilder lá no NovoUsuarioComponent. Primeiro importamos o validador:

import { validadorSenha } from './`validador-personalizado.validator.ts';

Depois chamar esse validador na lista de validadores.

 ],
        password: [
          '',
          [Validators.required, Validators.minLength(6), validadorSenha()],
        ],
      },

E por fim vamos mostrar uma mensagem caso as validações não forem aplicadas.

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

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors && novoUsuarioForm.get('userName')?.touched"
      mensagem="Senha deve conter no mínimo 6 caracteres"></app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.senhaForte"
      mensagem="Sua senha deve ter caracteres minúsculos, maiúsculos e numéricos">
    </app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.errors?.senhaIgualUsuario" mensagem="Senha deve ser diferente do usuário">
    </app-mensagem>

  </div>

E pronto, agora temos um campo de senha com algumas validações.

Espero ter ajudado, Edgard. Bons estudos.

DIEGO CARLOS MARTINS GAYOSO, segui sua orientação e deu certo. De ante mão te agradeço pela ajuda, mas queria aproveitar o gancho dessa duvida e tirar outra do mesmo problema no mesmo arquivo em relação ao campo "password" e um campo que eu criei chamado "confirmPassword". O que acontece é o seguinte. Entre o "usuário" e a "senha", caso se digita a senha igual o usuário, ele mostra o erro. Pois bem, me basiei nesta ideia, criando um campo chamado "Confirmar Senha", mas quando eu vou digitar a senha no campo "Senha, o erro do campo "Confirmar Senha" já aparece com o erro "Confirmar Senha e senha devem ser iguais". Quando vou apertar o TAB para ir no campo "Confirmar Senha", o mesmo erro só desaparece, quando digito a senha igual ao campo anterior. Ele está funcionando, porem acho que está funcionando errado. Pela regra de negócio, ele só devia aparecer este erro, só se voce digitar uma senha diferente, mas aparece antes de digitar. Este é o problema! antes de digitar o erro já aparece, se digitar a senha diferente da primeira senha, continua com erro, se digitar a senha igual ao primeiro, aí sim desaparece. Voce pode me ajudar a corrigir este problema? vou te mandar código.

Veja o resultado!

Viu! Só desaparece quando a senha for igual ao anterior.

E se digitar errado, o erro aparece normalmente. É isso que eu quero. Que o erro só apareça quando for digitar errado e confirmar que está errado. Igual a comparação entre usuário e senha.

Olá Edgard, tudo bem?

Você pode pedir para aparecer a mensagem somente de que o campo de confirmPassword apareca quando for tocado e quando as senhas forem diferentes.

<div class="form-group ">
    <input type="text" class="form-control" name="" placeholder="Confirmar senha" formControlName="confirmPassword" />

    <app-mensagem *ngIf="novoUsuarioForm.errors?.['senhasCombinam'] && novoUsuarioForm.get('confirmPassword')?.touched" mensagem="Senhas não são iguais.">
    </app-mensagem>

  </div>

Assim ele vai verificar se a senha combina só depois de tocar no campo.

E aproveita para fazer uma correção de um erro que cometi na sua dúvida anterior. As mensagens do campo de password estão verificando se o campo de userName foi tocado ao invés se ser no próprio campo de password, então faz essa alteração para ficar certinho, beleza?

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

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.required && novoUsuarioForm.get('password')?.touched"
      mensagem="Campo senha obrigatório"></app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors.minlength && novoUsuarioForm.get('password')?.touched"
      mensagem="Senha deve conter no mínimo 6 caracteres"></app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.senhaForte"
      mensagem="Sua senha deve ter caracteres minúsculos, maiúsculos e numéricos">
    </app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.errors?.senhaIgualUsuario" mensagem="Senha deve ser diferente do usuário">
    </app-mensagem>

  </div>

Coloquei também mas uma mensagem de erro para password que se o usuário tocar no campo mostra a mensagem de "Campo obrigatório", e alterei a condicional com a mensagem "Senha deve conter no mínimo 6 caracteres" para realmente verificar que esse campo está atendendo a quantidade de caracteres.

Espero ter ajudado, Edgard. Bons estudos.

DIEGO CARLOS MARTINS GAYOSO, segui sua orientação e deu certo, porém o mesmo problema no campo "Confirmar Senha" continua antecipando o erro de "Senhas não são iguais" e para piorar ele antecipa quando digito a primeira senha. Como podemos corrigir isso? Veja como ficou agora.

Primeiro teste OK!

Segundo teste falhou! Veja que eu nem entrei no campo "Confirmar Senha" e já apareceu o erro de "Senhas não são iguais". Isto está correto?

Terceiro teste OK. Veja que quando digito a senha igual à senha anterior, o erro "Senhas não são iguais" sumiu.

Diego, todos as minhas duvidas foram resolvidas contigo, mas essa duvida me persegue ainda. Em comparação com a segunda e terceira foto o erro "Senhas não são iguais" é normal aparecer quando digita a primeira senha ou só deve aparecer quando digitar no campo "Confirmar Senha" e sendo diferente da primeira.

Obs.: Veja o código deste campo "Confirmar Senha" abaixo? De antemão te pergunto. Ele está certo?

Veja com ficou agora o meu HTML com a sua correção.

Olá Edgard, tudo bom?

O que você pode fazer é que o campo de password apresente as mensagens de erro caso a senha passada não se encaixe ao controles de validação, e o campo de confirmPassword apenas verifique se ele é igual ao campo senha e se não for mostrar a senha, mas somente caso este campo seja tocado.

Então o campo de password terá todas as mensagens de erro e o confirmPassword apresenta uma mensagem de campo obrigatório e uma mensagem de "senha devem ser iguais".

Ficaria assim no template.

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

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.required && novoUsuarioForm.get('password')?.touched"
      mensagem="Campo senha obrigatório"></app-mensagem>
    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.minlength && novoUsuarioForm.get('password')?.touched"
      mensagem="Senha deve conter no mínimo 6 caracteres"></app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.get('password')?.errors?.senhaForte && novoUsuarioForm.get('password')?.touched "
      mensagem="Sua senha deve ter caracteres minúsculos, maiúsculos e numéricos">
    </app-mensagem>

    <app-mensagem *ngIf="novoUsuarioForm.errors?.senhaIgualUsuario" mensagem="Senha deve ser diferente do usuário">
    </app-mensagem>

  </div>

  <div class="form-group ">
    <input type="text" class="form-control" name="" placeholder="Confirmar senha" formControlName="confirmPassword" />

    <app-mensagem *ngIf="novoUsuarioForm.errors?.senhasDiferentes && novoUsuarioForm.get('confirmPassword')?.touched" mensagem="Senhas não são iguais.">
    </app-mensagem>
  </div>

E assim no componente:

 password: [
          '',
          [Validators.required, Validators.minLength(6), validadorSenha()],
        ],
        confirmPassword:['', [Validators.required]]
      },
      { validators: [usuarioSenhaIguaisValidator, senhasIguaisValidator] }

E no formulário, quando for digitado senhas diferentes, apresenta o erro de senhas diferentes, e os demais de quantidades e senhaForte.

Bons estudos, Edgard. E qualquer coisa estamos aqui.

Diego,

Obrigado pela ajuda, deu tudo certo. Sou novo em Angular e gostaria de ser bom o suficiente para poder juntar front-end com back-end. Isso seria possível? Tenho pouca experiência em Java e queria me tornar um full-stack usando Java e Angular. Dariapra fazer um projeto usando os dois?

Desde já agradeço pela ajuda e quando eu tiver duvida, ainda posso contar contigo?

Edgard,

Ficou muito feliz em te ajudar e pode contar comigo sim, Edgard.

E cara, é possível sim. Para isso sugiro que você crie seu projeto Angular e criar uma API usando o Framework Spring Boot do Java.

Cria seu front-end em Angular e para fazer a integração com a API você pode seguir os passos da aula de Comunicação HTTP do curso de Angular: explorando o framework.

Para criar a API, você pode aprofundar seus conhecimentos em Java temos a Formação de Spring Framework e caso já esteja familiarizado pode pular para etapa 4 da formação que é voltado para API em Spring Boot.

Bons estudos.

Boa tarde Diego,

Depois de tudo que eu criei com sua ajuda. Não consigo cadastrar um novo usuário. Antes de eu criar esse campo Confirmar senha, funcionava o cadastro normal. Depois de cria-lo. Parou de funcionar. Tem algo que eu fiz de errado?

Desde já agradeço.

Olá Edgard, tudo bom?

Você poderia, por gentileza, criar outro tópico para essa dúvida? Isso faz com que o fórum fique mais organizado e permite que outros estudantes encontrem a resposta para uma dúvida com mais facilidade.

Pode ser? Vou ficar de olho para te ajudar.

Abraço.

consegui resolver. O problema era no meu ng serve.

Obrigado mesmo assim