[MÚSICA]
Agora que tivemos uma rápida introdução à validação de forma reativa em
a palestra anterior, vamos prosseguir para o próximo exercício onde poderíamos
aplicar validação de formulário para a forma reativa que criamos no exercício anterior.
Então, indo para o nosso componente de contato arquivo typescript,
vamos adicionar os validadores de formulário para cada uma dessas propriedades dentro do nosso modelo de formulário.
Então, para o primeiro nome, eu diria dentro da matriz, Validadores.
Obrigatório, Da mesma forma eu vou
aplicar o mesmo para o, sobrenome.
Então e-mail, e também para o telnum, então para
o telnum eu diria para os três restantes eu posso deixá-los abertos,
porque eu concordo com ser falso ou verdadeiro e dar-lhes outros valores.
Porque é uma ligeira alternância e contacttype pode levar apenas um
dos três valores e valor padrão já é dado lá,
e para mensagem, podemos torná-lo não um valor necessário.
Se o usuário não quiser digitar comentários,
você pode permitir que eles não digitem comentários, mas se você quiser,
você pode adicionar os validators.Required mesmo para mensagem.
Além disso, quando você redefinir o formulário no método onSubmit aqui
você também pode redefinir o formulário para seu valor inicial, como especificamos
no método onde criamos o formulário.
Assim, dentro do valor de reset, ele leva um objeto como um parâmetro aqui.
Este objeto será usado pelo método reset, fazendo
uso do método set value que vimos na palestra anteriormente para redefinir
o formulário para a condição como era quando ele foi originalmente criado.
Então, aqui podemos fornecer
parâmetros como firstname: '',
lastname: '', telnum: 0,
Em seguida, email: '',
concordo: false,
contacttype: 'Nenhum',
message: '' '});.
Então esses valores que fornecemos neste objeto JavaScript
que nos damos o parâmetro para o método reset
terá exatamente os mesmos valores que vimos para
essas propriedades quando criamos esse formulário de feedback.
Também precisamos redefinir o formulário completamente no modelo.
Então, para fazer isso, para voltar para a importação aqui, e
então nós também vamos importar o ViewChild} de '@angular /core';.
Isso nos permitirá obter acesso a
qualquer um dos elementos dom infantil dentro do meu modelo.
Então, depois de fazer isso, entrando no código,
aqui no ContactComponent, eu posso dizer @ViewChild,
e então eu serei capaz de me referir ao FeedbackForm por
dando-lhe uma variável de modelo com o nome fform.
Você vai fazer isso na próxima etapa, e então para isso,
Vou me referir a isso usando FeedbackFormDirective.
Então, isso nos permite obter acesso ao formulário de modelo e, em seguida, redefinir completamente
, de modo que o próprio formulário é redefinido de volta ao seu valor intocada.
Então, este é outro passo adicional que precisamos fazer para garantir que o formulário é
completamente redefinido para seu valor inicial aqui.
Agora, tendo feito isso no método onSubject, depois de redefinir o FeedbackForm
Object em si aqui, também precisamos adicionar
em this.FeedbackFormDirective.resetForm ();
Lá.
Então isso garantirá que meu FeedBackForm seja completamente redefinido para seu valor de
primitivo neste momento.
Então, depois dessas mudanças vamos agora para o nosso arquivo template
para mostrar como podemos refletir esses erros
em nosso modelo para nosso formulário lá.
Então, alternando para o arquivo de modelo.
Então, primeiro, vamos para o botão aqui, e
então vamos fazer o botão Desativado.
Se o “FeedbackForm for inválido”.
Assim, o botão será ativado somente quando o FeedbackForm for válido.
Movendo para esse formulário deixe-me adicionar em
o <mat-error *ngif="feedbackform.get” get
('firstname') .hasError ('required')
&&
feedbackForm.get ('firstname')
.tocado”, e a mensagem é Primeiro nome é obrigatório.
Então essa seria a mensagem que você atribui usando uma única linha com o oculto,
com essa informação lá.
Deixe-me aplicar a mesma coisa ao sobrenome, número de telefone
e e-mail.
Então eu vou apenas copiar, colar, e editá-los,
para que você possa prosseguir com eles, e ('sobrenome').
Sobrenome.
Telnum.
Então eu aplico isso a ('telnum').
Novamente, a mesma idéia por trás disso e, em seguida, também para e-mail.
('e-mail').
Vamos adicionar a variável de modelo chamada fform ao formulário.
Então eu digite #fform ="ngForm”.
Indo para o nosso formulário no navegador, deixe-me digitar o primeiro nome,
e você vê que mesmo se eu excluir o valor ainda permanecerá verde,
porque usamos o tocado lá.
Mas no momento em que eu me afaste dele, então você
será capaz de ver que isso se torna uma cor vermelha.
Assim, da mesma forma para o Sobrenome você verá que quando eu
remover o valor Sobrenome, então isso é mostrado de forma semelhante.
Deixe-me digitar o primeiro nome e o sobrenome, e para o e-mail também.
O, Mesmo caso para o número de telefone também.
Assim, você pode fazer validação de formulário em nosso aplicativo.
Com isso, concluímos este exercício onde temos
adicionado na validação de formulário ao nosso formulário reativo.
Este é um bom momento para você fazer um commit git com a mensagem,
reativo forma parte dois.
[MÚSICA]