CRUD Angular + Spring | 34: Validações de Formulário no Front-end

Подписаться 153 тыс.

Просмотров 5 тыс.

50% 1

Curso CRUD com Angular e Spring. Nesse vídeo vamos adicionar as validações no formulário para que a requisição que irá ser enviada ao servidor já esteja validada e passe pelas validações da API, dessa forma economizando requisições desnecessárias para o servidor.
🔗 Links citados no vídeo
▸ Código fonte: github.com/loi...
▸ Pacote extensões Angular: marketplace.vi...
▸ Pacote extensões Java + Spring: marketplace.vi...
▸ Tema do VSCode: marketplace.vi...
📌 Redes Sociais
▸ Cursos: loiane.training/
▸ Blog: loiane.com/
▸ Instagram: / loiane
▸ Github: github.com/loiane
▸ Twitter: / loiane
▸ Facebook: / loianegroner
Junte-se ao grupo desse canal para ter acesso aos benefícios:
/ @loianegroner
#Angular
#Spring
#CRUDAngularSpring

Опубликовано:

18 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@marcosanthero3689 Год назад

Bom dia Participei de um processo de contratação para uma consultoria que presta serviço só Santander. E o entrevistador disse que o conteúdo da Liane é melhor que qualquer conteúdo paggo

@loianegroner Год назад

Muito obrigada!

@diegoam5364 Год назад

Verdade mesmo

@umamentepelomundo 11 месяцев назад

Voltei lá atrás em todos os vídeos e deixe o like e o comentário para ajudar o canal chegar em mais pessoas. Obrigado Loiane!

@jomario00 Год назад

Olá, Loiane! Só uma observação, você tem um mat-option de categoria com value=null assim ainda é possivel salvar um novo curso sem categoria. Suas aulas são incríveis obrigado por tanto.

@loianegroner Год назад

Oie, valeu! Vou acertar isso em aulas futuras!

@weles6523 Год назад

Olá Loiane! Primeiramente muito obrigado por fazer nossa vida mais fácil e por sua generosidade em compartilhar conosco este conteúdo de forma gratuita. Precismaos de mais pessoas como você. As validações funcionam corretamente, quando clicamos nos campos ou colocamos menos ou mais caracteres, contudo se eu clicar no botão salvar o formulário é submetido normalmente. Será que faltou alguma lógica antes do submite para checar se há erros e não deixar submeter, ou talvez eu tenha perdido algum ponto. De qualquer forma vou revistar a aula. Obrigado :)

@loianegroner Год назад

oie, sim, falta a validação que vamos adicionar mais pra frente.

@milenapazdelima3201 Год назад

Oii loiane estou fazendo seu curso de Java básico e estou amando demais sua didática e maravilhosaa, eu faço TI e não consegui aprender quase nada com o professor de algoritmos e consegui aprender tudo com você 💘

@boblipe02 Год назад

Aulas e Palestras Loiane, Obrigado por esse Show de Aula. 💪🧠🦾👏🙏🫀

@diegoam5364 Год назад

Um dia quero ter oportunidade de conhecê-la. Vc é sensacional...

@boblipe02 Год назад

Somos 2 e agradecer ainda ...

@diegoam5364 Год назад

Verdade...

@pauloafpjunior Год назад

Loiane, supondo que se tenha vários formulários com os mesmos tipos de validação (campo vazio, mínimo e máximo de caracteres, etc), como você faria para encapsular essa lógica de validação em uma classe/serviço? Parabéns pelo excelente trabalho que você desenvolve aqui no YT.

@loianegroner Год назад

Obrigada. Depende do projeto, mas existem formas diferentes de se fazer isso: 1 - Criar campos que já contém as validações mínimas e comuns, e usar o tipo de campo. 2 - Criar uma validação customizada que irá verificar tudo o que for necessário. Porém, é preciso analisar se esse caminho é realmente necessário.

@pauloafpjunior Год назад

@@loianegroner obrigado

@mugatu2017 2 месяца назад

thanks Loiane, as far as i know, binding function o methods in the html is not a good practices (change detection), will be more interesting if we pass those errors to a generic component with input o using transclussion (ng-content)

@marcelo8038 8 месяцев назад

Pessoal, estou usando o angular 17 e pra mim só consegui fazer funcionar igual ao do vídeo com o seguinte código (espero que ajude alguém): getErrorMessage( fieldName: string ) { const field = this.form.get( fieldName ); const erros = this.form.getError( fieldName ); if ( field?.hasError( 'minlenght' ) ) { return 'Campo Obrigatório'; } if ( field?.hasError( 'minlength' ) ) { const requiredLenght = erros ? erros[ 'requiredlength' ] : 5; return `Tamanho MĨNIMO precisa ser de ${requiredLenght} caracteres`; } if ( field?.hasError( 'maxlength' ) ) { const requiredLenght = erros ? erros[ 'requiredlength' ] : 50; return `Tamanho MÁXIMO é de ${requiredLenght} caracteres`; } return 'Campo Inválido.'; }

@yuriaguiar7827 Год назад

Nós podemos utilizar o maxlength="" atributo disponível no input para limitarmos a quantidade de caracteres digitada!

@leandrof.4236 Год назад

Parece que termo Elvis Operator tá em deuso. Na documentação do Angular e do TypeScript esse recurso vem sendo chamado de Safe Navigation Operator

@loianegroner Год назад

Oie, exatamente! Depois que o TS adicionou isso, o pessoal não está mais chamando de elvis operator!

@MachineHead393 Год назад

Mas pra c# e Java é elvis e pronto! kkkkk

@MLOM2010 Год назад

Quais são os 'errorCode' possíveis para o método hasError??? Vc mostrou o hasError('required'), mas gostaria saber onde consigo saber o mapa de erros possíveis.

@loianegroner Год назад

Oi Marcelo, dá uma olhada nas aulas de formulário do curso de angular. Abordei esse assunto bem a fundo por lá.

@umamentepelomundo 11 месяцев назад

Alguém está tendo o erro "Incorrect use of " no console? Parece estar funcionando tudo bem, mas o erros esta aparecendo no console.

@airtonfilho337 Год назад

Loiane, não consegui entender, ou então meu código não está funcionando como o esperado. Mesmo adicionando os Validators, continuo conseguindo cadastrar essas informações no Banco de Dados. O formulário continua sendo enviado, sem nada. Isso deveria acontecer?

@loianegroner Год назад

Oie, ainda vamos restringir essa parte em aulas futuras.

@GuilhermeTormena-ey9xz 11 месяцев назад

Oi Loiane, é possivel obter a validação de formulários aninhados? Tenho um formulário como o de cursos e outro como o de lições. Nesse caso o formulário de cursos chama o formulário delições que tem suas validações. Gostaria requerer essas validações somente se o usuario realmente adicione uma lição!

@loianegroner 11 месяцев назад

Oie, dá pra fazer sim, aí teria que colocar listeners nas ações e mudar a lógica pra apenas ter isso quando adicionar uma lição nova.

@GuilhermeTormena-ey9xz 11 месяцев назад

Nesse caso o formulario de cursos ficaria escutando o formulario de lições e suas validações? No meu caso implementei o ControlValueAccessor, funciona bem, visto que ele reconhece as validações do formulário de lições, porém o formulário continua valido mesmo com os campos do formulário invalidos!! Como o listner funcionaria de modo a informar o formulario que os campos devem ser preenchidos? Existem algum artigo pra me ajudar?! Obrigado.

@pegonslog Год назад

Boa tarde, gostaria de saber, por favor, como ativo essa descrição do tipo, contido dentro dos parênteses no parâmetro do método. Obrigado

@loianegroner Год назад

Oie, isso vem do language service do Angular, é uma extensão do VSCode. O meu pacote de extensão tem todos o plugins que uso nas aulas. Abs.

@pegonslog Год назад

@@loianegroner Legal, já instalei os pacotes mas não apareceu, vou procurar aqui de novo, obrigado, abs.

@pegonslog Год назад

Não encontrei, acho que é alguma configuração. Por exemplo, nesse curso, no onSubmit, tem o "this.service.save(record: this.form.value)", o "record" que não aparece para mim. Acho que não é da extensão, e sim de configuração.