2

Tenho algumas validações de campos obrigatórios na minha aplicação e hoje faço desta forma:

verificarObrigatorios(): boolean{
    if(!this.pessoa.nome)
    {
        this.toastr.showMessage("Nome Obrigatório")
        return false;
    }
    if(!this.pessoa.cpf)
    {
        this.toastr.showMessage("CPF Obrigatório")
        return false;
    }
    if(!this.pessoa.dataNascimento)
    {
        this.toastr.showMessage("Data de Nascimento Obrigatório")
        return false;
    }
    //...
    return true;
}

Estava dando uma estudada nessa questão, de diminuir a quantidade de if/else mas não consegui encaixar no meu cenário. Como posso reduzir eles?

1

3 Respostas 3

3

Você pode criar uma função responsável pela validação da obrigatoriedade, que exibe o erro e retorna false caso o campo seja inválido.

E uma segunda função que chamará a primeira para cada um dos campos obrigatórios. Veja o exemplo abaixo, adaptado para executar no Snippet.

function verificaCampoObrigatorio(valor, nomeCampo) {
  if (!valor) {
    console.log(`${nomeCampo} Obrigatório`);
    return false;
  }
  return true;
}

function verificarObrigatorios(pessoa) {
  return verificaCampoObrigatorio(pessoa.nome, 'Nome')
    && verificaCampoObrigatorio(pessoa.cpf, 'CPF')
    && verificaCampoObrigatorio(pessoa.dataNascimento, 'Data de Nascimento');
}

console.log('{}');
const return1 = verificarObrigatorios({});
console.log('{ nome: "Romeu" }');
const return2 = verificarObrigatorios({ nome: 'Romeu' });
console.log('{ nome: "Romeu", cpf: "123" }');
const return3 = verificarObrigatorios({ nome: 'Romeu', cpf: '123' });
console.log('{ nome: "Romeu", cpf: "123", dataNascimento: new Date() }');
const return4 = verificarObrigatorios({ nome: 'Romeu', cpf: '123', dataNascimento: new Date() });

console.log('--------------');
console.log('Retornos:', return1, return2, return3, return4);

Dessa forma, as mensagens continuam sendo exibidas, só exibe uma única mensagem de erro (por causa do return false, como no código da pergunta) e se todos estiverem corretos, retorna true.

3

Se for utilizar algo como @placementw mencionou, mas quer obter o resultado booleano, você poderia usar a função OR. Isso também mostraria mais de uma mensagem, em caso de múltiplos erros.


isCampoInvalido(campo: any, mensagem: String): boolean {
    if (campo != null) {
      return false;
    }
    this.toastr.showMessage(mensagem)
    return true;
}

verificarObrigatorios(): boolean {
  let invalido = false;
  invalido |= isCampoInvalido(this.pessoa.nome, "Nome Obrigatório");
  invalido |= isCampoInvalido(this.pessoa.cpf, "CPF Obrigatório");
  invalido |= isCampoInvalido(this.pessoa.dataNascimento, "Data de Nascimento Obrigatório");
  return !invalido;
}
1
  • Solução legal. Para ficar do jeito desejado pelo OP, creio que seria mais adequado utilizar ||= como operador, e return !invalido. E recomendo utilizar unknown ao invés de any Commented 18/06/2021 às 19:37
1

Acredito que algo nesse formato funcionaria da maneira que você espera, basta chamar a função para cada campo, podendo até percorrer o objeto testando cada propriedade, caso forem muitas, pra economizar algumas linhas

var camposSaoValidos = true;

function verificaCampo(campo: any, mensagem: String) {
  if (campo == null) {
    this.toastr.showMessage(mensagem)
    camposSaoValidos = false
  }
}

function verificarObrigatorios() {
  camposSaoValidos = true
  verificaCampo(this.pessoa.nome, 'nome nao existe');
  // chamar todos as verificações
  return camposSaoValidos
}

Editei pra corrigir um erro que cometi no Stackblitz, e adequar comportamente conforme o @Inkeliz apontou

2
  • 2
    Nesse caso a função verificarObrigatorios sempre retornaria true.
    – Inkeliz
    Commented 18/06/2021 às 19:20
  • @Inkeliz tem razão, não tinha prestado atenção nessa parte do comportamento, editei pra ajustar. Obrigado pela observação Commented 18/06/2021 às 19:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .