Tínhamos lidado com formas reativas em uma das lições anteriores,
onde fizemos dois exercícios lidando com formas reativas,
como as criamos,
e depois também fazemos alguma validação básica de formulários em formas reativas.
Continuaremos com o tema nesta lição,
porque formas reativas como o nome indica,
tem algo a ver com programação reativa como você poderia esperar.
Agora, formulários reativos também permitem que você observe alterações nos valores dos elementos de formulário,
usando um observável que Angular disponibiliza chamado valueChanges.
Vamos fazer uso do ValueChanges observável neste exercício,
para rastrear alterações nos valores de
seus vários elementos de formulário e, em seguida, acionar imediatamente a validação de formulário.
Neste exercício vamos fazer a maior parte da validação do formulário no código
em vez do modelo em si,
como fizemos com a validação da forma do reator no segundo exercício de formas reativas.
Indo para contact.component.tsfile,
vamos atualizar o formulário reativo que criamos aqui,
adicionando mais alguns Validadores para alguns desses campos.
Então, aqui você vê que para o primeiro sobrenome e
o número de telefone e e-mail adicionamos os validadores necessários.
Para o primeiro e o sobrenome,
Vou adicionar mais alguns Validadores para
o comprimento mínimo e o comprimento máximo.
Agora, se você tem mais de um Validador em sua forma reativa,
você tem que declará-los usando uma matriz lá.
Então, isso tem que ser fechado dentro de uma matriz aqui.
Então, você vê que eu tenho fechado o validador necessário dentro de uma matriz.
Vou adicionar em um Validadores, minLength Validator.
Então, para o comprimento mínimo eu vou especificar dois como o comprimento mínimo,
para que o nome deve conter pelo menos dois caracteres.
Também o comprimento máximo que vou
adicionar como 25 caracteres.
Então, aqui você vê que agora para o primeiro nome temos três diferentes Validations,
todas incluídas em uma matriz aqui.
Validadores necessários, Validadores minLength,
e Validadores MaxLength aqui, 25.
Então, eu vou fazer a mesma coisa também para o meu sobrenome.
Então, deixe-me copiar todo este raio Validadores aqui,
e, em seguida, substituir este por aquele conjunto de Validadores.
Agora, além disso, para o número de telefone,
como você se lembra na versão anterior do formulário,
o número de telefone estava disposto a aceitar até alfabetos,
mas isso não está correto.
Números de telefone geralmente são números.
Então, este é o lugar onde vamos usar outro Validador
chamado Validadores padrão.
Então, o Validador padrão nos permite especificar um padrão para
os valores inseridos nesse elemento de forma particular,
e, em seguida, verifique para se certificar de que o valor segue o padrão especificado.
Então, aqui o padrão que vamos usar é que o valor
deve conter apenas números entre zero e nove.
Para adicionar o padrão,
precisamos fazer isso no arquivo de modelo como veremos em pouco tempo.
Da mesma forma, para o e-mail,
Eu também terei outro Validador chamado como o Validador de e-mail.
Então, vamos adicionar no e-mail Validadores.
Isso também significa que precisamos adicionar um atributo
chamado email à entrada em nosso arquivo de modelo.
Agora, com essas mudanças, minha validação de formulário tornou-se mais robusta neste exercício.
Agora, quando o formulário experimenta mudanças em qualquer um dos seus elementos de formulário,
então o quadro Angular fornece um observável chamado como ValueChanges observável.
Então, eu vou usar o ValueChanges observável no meu formulário de feedback.
Então, o ValueChanges observável.
Então, o ValueChanges observável agora pode ser inscrito dentro deste método específico.
Então, quando criarmos o formulário em si,
vamos assinar o ValueChanges observável aqui.
Agora, quando o ValueChanges,
assim, subscrevendo a este observável,
dentro do subscrito vou especificar o que deve ser feito quando o ValueChanges.
Então, quando o ValueChanges eu obteria alguns dados aqui,
do farm para indicar
qual elemento de forma particular experimentou a mudança no valor.
Então, quando isso acontecer,
Eu vou acionar um método local que vou implementar chamado onValueChanged,
e, em seguida, fornecer esses dados como um parâmetro para este método.
Agora, dentro deste método onValueChanged,
Vou iniciar a validação de formulário,
e, em seguida, definir adequadamente as mensagens de erro de formulário com base no que
este objeto de dados que eu obtenho aqui irá especificar para mim.
Além disso, quando eu criar o formulário,
Vou chamar o método onValueChanged sem qualquer parâmetro,
e isso seria usado para
redefinir mensagens de validação de formulário.
Agora, como faço para criar as mensagens de validação de formulário?
Para fazer isso, vou definir minhas mensagens de validação de formulário completamente em código aqui.
Em seguida, através do código,
Eu vou adaptar as mensagens de validação de formulário,
e que seria então usado para exibir as mensagens de erro no meu modelo de formulário em si.
Então, para fazer isso, o que eu vou fazer é adicionar alguns objetos JavaScript aqui.
Um dos objetos JavaScript que vou adicionar é nomeado como erros de formulário.
Então, este é um objeto JavaScript simples que
irá conter todos os erros para o formulário particular aqui.
Assim, dentro dos erros de formulário,
Vou usar quatro campos diferentes,
primeiro nome, sobrenome.
Então, como você se lembra,
estes correspondem aos quatro elementos de formulário em que estou fazendo a validação do formulário,
número de telefone e e-mail.
Agora, por que eu defino este objeto JavaScript aqui?
Agora, este objeto JavaScript como você vê contém quatro elementos aqui.
Agora, sempre que faço a validação do formulário,
recorda que já especifiquei que
vou criar um novo método chamado onValueChange.
Dentro do OnValueChange, a forma como o código é escrito é que,
se algum erro for detectado,
uma string contendo a mensagem correspondente a
que o erro será adicionado a este objeto JavaScript.
Assim, desta forma dentro do meu código,
Eu posso fazer a validação do formulário.
Agora, além disso,
Vou agora definir algumas mensagens de validação.
Agora, esse padrão particular de fazer coisas,
Eu aprendi lendo a documentação sobre validação de formulário no site angular.io.
Então, eles têm toda uma documentação sobre como fazer validação de formulário e um link para o qual é
disponível nos recursos adicionais de
este capítulo e também os capítulos anteriores sobre formas angulares.
Então, lá naquele documento em particular eles
prescrevem isso como uma forma de fazer validação de formulário e eu achei que era muito intuitivo.
Então, eu também adotei o mesmo padrão para fazer validação de formulário em código.
Então, junto com aqui,
Eu vou definir as mensagens de validação para todos os campos possíveis aqui.
Então, para o campo de primeiro nome,
Eu vou definir algumas mensagens de validação aqui, então eu diria,
“obrigatório” e depois dizer,
“primeiro nome é obrigatório” como este,
Vou adicionar em algumas mensagens de validação
aqui e dizer,
“Primeiro nome deve ser
pelo menos 2 caracteres” e então eu também irá adicionar,
“comprimento máximo” e a mensagem correspondente seria,
“Nome não pode ser superior a 25".
Se você tem um nome que tem 25 caracteres,
você deve estar realmente amaldiçoando seus pais por isso, acredite em mim,
um dos meus nomes do meio é um longo nome do meio,
e que eu não uso explicitamente em meus documentos.
Mas, eu posso entender a dor,
se você tem um nome longo maior que 25 caracteres.
Pessoas de alguns estados na parte sul da Índia têm nomes longos,
meu estado incluído, hey,
vamos nos divertir enquanto estamos nisso.
Ok, eu também vou incluir a mesma coisa para o sobrenome.
Então, eu vou editar este
e especificar a mesma coisa que o sobrenome.
Então, como você vê dentro do código, você pode especificar um conjunto de mensagens de erro.
Agora, se você adicionar nova validação aos seus formulários,
tudo o que você precisa fazer é,
venha aqui e adicione a nova mensagem de erro em
este objeto JavaScript aqui e seu código funcionará bem, como tal.
Então, essa é a vantagem de usar esse padrão para projetar sua validação em código.
Continuando, deixe-me definir a validação para o número de telefone e
a validação dois para números de telefone que aconteceria é o “obrigatório”.
Então, eu só vou copiar o “obrigatório” de lá,
e colá-lo aqui,
e eu diria,
“O número de telefone é necessário”, e a próxima mensagem de erro seria para “padrão”.
Então, a mensagem de erro diz,
“O número de telefone deve conter apenas números.”
Então, essa é a outra mensagem, da mesma forma para e-mail.
Então, como você pode ver os valores que eu estou usando aqui
são correspondentes aos nomes do Validador que eu usei,
“comprimento médio”, “comprimento máximo necessário”, “padrão”.
Assim, da mesma forma para o e-mail,
você veria “obrigatório” e “Email'.
Então, eu vou apenas copiar o “obrigatório” aqui e dizer, “O e-mail é obrigatório”.
O outro padrão que você lembra é para e-mail e eu diria,
“E-mail não em formato válido”.
Então, normalmente se o seu e-mail não contém
um sinal @ e caracteres em ambos os lados do sinal @,
então isso não é um e-mail válido.
Este Validador de e-mail já está integrado no módulo de formulários reativos angulares.
Então, vamos fazer uso do e-mail Validator aqui.
Então, aqui temos todas as mensagens de validação definidas no código.
Então, isso torna muito fácil estender para campos adicionais se você precisar e também
adicionando mais mensagens de validação para validações adicionais
que você pode introduzir para cada um desses campos de formulário.
Além disso, esses erros de formulário de objeto me ajuda a rastrear
todos os erros associados a cada um dos elementos no meu telefone.
Então, atualmente eu só verificar esses quatro elementos,
então é por isso que eu só tenho para isso.
Correção menor, o “comprimento médio” deve ser min,
pequeno 'l' e comprimento máximo também com um pequeno 'l',
semelhante para o sobrenome também.
Agora, vamos escrever o código para o método em valores alterados.
Então, eu vou escrever o método
aqui, "valueChanged” e, em seguida, este
vai tomar em um parâmetro, possivelmente.
É por isso que coloquei um ponto de interrogação de dados,
o que significa que o parâmetro é opcional.
Então, a primeira coisa que vou verificar é, “este formulário de feedback”,
o que significa que se o formulário de feedback não foi criado então,
e se esse método é chamado,
então você deve simplesmente “retornar” sem nada.
Então, vou definir uma constante
chamada “esta forma de feedback
” é apenas para facilitar a definição do resto do código,
então eu diria, “para
campo const em erros this.form”.
Então, observe que este campo levará this.form erros,
o objeto de erros de formulário que definimos anteriormente.
Então, sentir significa que vou verificar todos os quatro.
Então, sempre que eu detectar qualquer alteração,
o primeiro nome, o sobrenome,
número tel e um e-mail.
Então, é por isso que esses quatro carregarão exatamente os mesmos nomes que usamos no formulário aqui,
e para que o código escrito aqui seja simples de trabalhar.
Então, eu vou agora verificar os campos de formulário.
Então, eu primeiro
certificar-se de que no caso de eu ter anexado anteriormente quaisquer mensagens a estes campos de formulário,
erros de formulário objeto lá,
então eu vou limpar todos eles.
Então, é por isso que se você chamar isso sem parâmetro,
todos os campos de erro de formulário serão apagados,
e então eu faria, “controle FormGet”.
Então, observe que eu estou usando esse campo em si para fazer um FormGet assim,
Estou recebendo acesso a esse campo de formulário específico.
Então, observe que anteriormente estávamos fazendo “feedbackform.this.feedbackform.get"firstname”.
e assim por diante. Então, eu simplifiquei o que nesta constante particular que nós
definimos aqui e então eu vou dizer, “Se controle”.
Então, o que significa que se o controle não é nulo e “control.dirty”.
Então, se esse campo específico já estiver sujo
e não “controle válido”.
Então, significa que para cada um dos campos,
Eu estou literalmente verificando para ver se é válido,
se é sujo,
e então se o controle já está lá.
Então, eu vou verificar para ver que tipo de erros foram adicionados a
este controle particular pelo formulário lá.
Então, aqui vou dizer,
“mensagens const iguais
a this.validation messages field”.
Observe como eu estou pegando
todas as mensagens de validação correspondentes a esse campo particular nome,
sobrenome, ou telnum ou e-mail,
e então eu vou verificar e ver se eu preciso adicionar isso no campo.
Então, como faço isso?
Então, fazemos para chave const em control.errors.
Então, observe que este controle é o campo de feedback form.get e.error,
então estou verificando se há algum erro lá.
Então, nesse caso,
Vou adicionar este campo de erros de formulário.
Então, para esse item específico no objeto JavaScript que eu defini aqui,
eu adicionaria mensagens chave
plus e espaço aqui.
Então, agora qualquer pesquisa de erro formulário
ou a mensagem correspondente será tomada e anexada em,
e então meu objeto JavaScript erros formulário agora irá conter
todas as mensagens de erro anexadas em conjunto quando
este particular em valores alterados método ratos.
Agora, este pedaço particular de código que eu peguei emprestado de
a documentação de validação formulário em angular.iu.
Descobri que esta é uma maneira muito intuitiva de fazer a verificação de erros de formulário.
Então, eu pensei por que não fazer uso disso dentro do nosso exercício formas reativas angulares.
Então, adicionando esse código lá.
Agora, meu aplicativo está pronto para fazer a validação do formulário para o meu formulário reativo.
Então, agora o próximo passo é ir para o componente de contato.html,
o arquivo de modelo e, em seguida, atualize o arquivo de modelo.
Então, indo para esse arquivo template,
vamos agora para o formulário,
e o neste formulário agora em vez de fazer todas essas verificações em código,
agora podemos simplificar muito do código aqui no arquivo template aqui.
Agora, em vez de fazer todas essas verificações,
o que percebemos é que os erros de formulário objeto JavaScript em
meu arquivo tipescript se houver erros, então
os erros de formulário objeto JavaScript para esse campo particular,
terá todas as mensagens de erro anexadas a ele.
Se não houver erros,
então essas mensagens de erro não estarão lá.
Então, isso é o que eu vou usar para verificar e
ver se eu devo exibir o erro de formulário ou não.
Então, nesse caso, em vez de verificar tudo isso,
a única coisa que eu preciso verificar aqui é forMerrors firstname, é isso.
Então, muito fácil de verificar se há erros aqui.
Da mesma forma, então todo este código agora é simplificado aqui,
e da mesma forma quando você verificar a mensagem aqui,
o que vamos fazer, eu vou mudar toda essa coisa de
necessário tocado para formerrors.firstName.
É isso. Se isso existe,
então todas as mensagens de erro correspondentes a isso já estarão lá,
então eu só preciso fazer interpolação e
então exibir formerrors.FirstName aqui,
tão simples quanto isso.
Agora, você vê fazendo
toda a validação de erro de formulário e código e fazendo todas as verificações e assim por diante no código,
você já construiu as mensagens de erro que precisamos exibir.
Tudo o que fazemos é pegar essa mensagem de erro e, em seguida, colocar
isso no modelo aqui, é isso.
O código do modelo torna-se mais simplificado neste caso particular,
e também fazendo a validação do formulário usando o código datilografado,
temos simplificado o modelo aqui ao mesmo tempo que podemos fazer
validação de formulário mais complicado em nosso código datilografado.
Eu vou ir em frente e fazer o mesmo tipo de alterações nos campos restantes aqui,
assim, para o campo sobrenome,
Eu vou substituir novamente toda essa coisa com formerrors.lastName.
Agora, novamente faça a mesma coisa para o número de telefone.
Agora, novamente como você vê a estrutura do modelo torna-se muito,
muito uniforme neste caso.
Então, isso também é outra maneira de simplificar
a estrutura do seu modelo continuar para o campo de e-mail aqui.
Vou fazer a mesma alteração no campo de e-mail também.
Então, eu diria formerrors.email
e substitua isso por formatters.email.
Então, como você pode ver,
seu código de modelo simplificou significativamente em comparação com antes.
Com isso, toda a validação de erro que eu exijo
foi adicionada ao meu modelo e meu modelo agora está atualizado,
então vamos salvar as alterações.
Duas outras coisas que preciso adicionar é o atributo
chamado email para este campo específico chamado email.
Então, lembre-se que adicionamos o Validador de e-mail aqui.
Então, junto com o obrigatório,
Eu vou adicionar e-mail também para o campo de entrada aqui.
Da mesma forma, para o telnum,
usamos o padrão lá.
Então, eu vou adicionar no padrão então este é o campo de entrada para o telnum.
Então, dentro do campo de entrada eu vou adicionar padrão é igual a e
o padrão que eu vou adicionar é
entre colchetes zero a nove,
e depois colocar uma estrela lá.
Então, o que significa que isso é qualquer coisa zero a nove repetido várias vezes.
Então, o número de telefone pode conter qualquer número entre zero e nove.
Qualquer número desses números.
Você também pode colocar um minlength e maxlength no campo telnum
se para o seu país específico o número de telefone tiver um formato fixo,
você também pode fazer isso.
Então, isso pode ser feito facilmente.
Mas, neste exercício,
Eu não adicionei na restrição minlength e maxlength para o telnum aqui.
Agora, que fizemos todas as atualizações,
vamos salvar as alterações e, em seguida, ir e dar uma olhada no formulário no navegador.
Indo para o navegador agora,
vamos rolar para baixo até o formulário aqui.
Vamos digitar o primeiro nome e como você vê quando você digita apenas um único caractere,
então a mensagem de erro é exibida imediatamente,
mas no momento em que você digita caracteres adicionais essa mensagem de erro desaparecerá.
Da mesma forma, para o sobrenome.
Para o número de telefone, se você tentar digitar algo diferente de números,
então as mensagens de erro serão exibidas.
Então, você pode digitar,
de forma semelhante para e-mail, para que você veja que o formato de e-mail não inválido será exibido.
Se você não tiver o e-mail, ele também mostra a mensagem de erro.
Mas, no momento em que você digita algo assim,
então este é considerado um formato de e-mail válido para que ele seja aceito.
Então, que é o conjunto de mensagens de erro e a validação de formulário
feito completamente em código como feito neste exercício particular.
Então, com isso, completamos este exercício.
Neste exercício, vimos o uso da mudança de valor é observável,
e também vimos como podemos fazer validação de formulário em nosso código datilografado.
Isso conclui este exercício.
Este é um bom momento para você fazer um commit git com
a mensagem reativa forma parte três.