ValidationMessage no EditForm do Blazor

Nesse artigo vamos ver um componente chamado ValidationMessage, que podemos utilizar nos formulários do Blazor para customizar a posição onde as mensagens de validação serão apresentadas.

O Problema

No artigo em que falamos sobre Validação de Forms no Blazor, vimos o componente ValidationSummary, que é usado para exibir uma lista com todos os erros de validação capturados pelo EditForm.

O problema do ValidationSummary é que ele agrupa todas as mensagens de erro em um único lugar. E isso não nos permite separar essas mensagens, para posicioná-las cada uma em um local diferente.

É muito comum criar formulários onde as mensagens de erro fiquem perto do campo que originou o erro, como você pode ver na Figura 1.

Figura 1: Mensagem de Erro abaixo do campo onde o erro ocorreu

A Solução

O componente ValidationMessage serve exatamente para resolver esse problema. Em vez de usar um único ValidationSummary, usamos um ValidationMessage para cada input do nosso formulário.

Veja essa implementação na Figura 2.

Figura 2: Adotando ValidationMessage

Para utilizar o ValidationMessage basta passar para o seu parâmetro For, uma expressão lambda, que referencie a propriedade para a qual será apresentada as mensagens de validação.

O resultado desse exemplo pode ser visto aqui na Figura 3.

Figura 3: Testando o ValidationMessage

Veja que essa é uma forma de apresentar mensagens de validação, bem mais instrutiva ao usuário final da aplicação.

Grande Abraço e até o próximo!

Um comentário em “ValidationMessage no EditForm do Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s