Com uma breve compreensão das Formas Reativas Angulares,
vamos prosseguir para o próximo exercício.
Neste exercício, vamos construir
uma Forma Reativa Angular na aplicação Angular que temos trabalhado até agora.
Ao longo do caminho, consolidaremos nossa compreensão das Formas Reativas Angulares.
Para começar o exercício,
o primeiro passo que precisamos fazer é importar
o módulo de Formulários Reativos Angulares para nosso módulo de aplicativo.
Então, vamos para o módulo do aplicativo,
e então vemos que já tínhamos importado o módulo de formulários anteriormente.
Também importaremos o módulo Angular Reactive Forms.
Então, eu vou copiar isso, colar isso aqui,
e depois mudar isso para o módulo Angular Reactive Forms.
Depois de fazermos isso, também precisamos incluir isso em nosso decorador.
Então, indo para o decorador aqui,
Eu vou importar o módulo de formulários reativos no decorador.
Dois outros módulos que precisamos importar para
nosso formulário é o MatSelectModule e o MatSlideTogGleModule.
O módulo select nos permite usar o elemento select,
e o slideToggle nos permite usar o slide alternar em nosso formulário.
Então, para fazer isso, vamos digitar
importar MatSelectModule de angular/material/selecionar,
e importar MatslideTogGlemodule de angular/material/slide-alternância,
e então precisamos adicioná-los ao nosso decorador NGModel nas importações.
Então, indo para lá,
deixe-me importar o MatSelectModule e MatslideTogGleModule lá.
Então, com essas mudanças,
nosso módulo de aplicativo agora está pronto para nos permitir a
usar o módulo Formulários reativos em nossa aplicação.
Na próxima etapa,
o que eu vou fazer é criar uma classe aqui chamada como Feedback.
Então, vou criá-lo na pasta compartilhada no arquivo feedback.ts.
Agora, esta é a estrutura da classe que representa
o modelo de dados correspondente ao modelo de formulário que vamos para
usar dentro da nossa aplicação Angular.
Então, eu crio a classe chamada feedback.
Dentro da classe Feedback,
Eu vou incluir algumas propriedades;
primeiro nome, sobrenome,
então número de telefone, Telnum, e-mail,
então eu concordo que é uma variável booleana,
propriedade booleana, contacttype que é do tipo string.
Ficará mais claro para você por que eu incluo todos
estes quando olharmos para o design do formulário em si.
Esta classe de feedback em particular corresponde ao feedback que
um usuário pode enviar sobre o nosso restaurante dentro da nossa aplicação Angular.
Então, essa é a razão pela qual eu crio esta classe Feedback.
Nós vamos mapear isso para o modelo de formulário em
um dos componentes lá e também junto com isso,
Eu vou exportar uma constante que é uma matriz de string chamada
contacttype que como eu
mencionado é uma matriz de string contendo três strings aqui,
none, Tel, e e-mail.
Então, agora nossa estrutura de modelo de dados está pronta.
Então, mais tarde, quando desenvolvermos nosso lado do servidor,
poderemos mapear isso em um dado que armazenamos no lado do servidor.
Então, dentro do nosso aplicativo Angular,
isso forma o modelo de dados que vamos usar para nosso aplicativo assim como o prato,
o líder, e a promoção que desenvolvemos é outra classe que
nos permite agrupar um conjunto de propriedades em uma classe aqui.
Então, uma vez que tenhamos concluído isso,
vamos prosseguir com a criação do formulário reativo.
Vamos criar o formulário reativo em nosso componente de contato.
Então, vamos para o arquivo component.ts contato,
e também vamos incluir
o formulário correspondente no arquivo de modelo de componentes de contato.
Então, nos componentes de contato digite arquivo de script,
então é aqui que vamos preparar nosso formulário
como vimos o formulário reativo é construído principalmente
no código e, em seguida, mapeado para os elementos de formulário no arquivo de modelo.
Então, aqui eu vou importar algumas classes.
Importarei o FormBuilder,
depois o FormBuilder e os validadores.
Validadores seriam usados para validação de formulário que será no próximo exercício,
mas eu os importarei no momento.
Estes são importados da biblioteca de formulários angulares.
Então, uma vez que importamos isso,
vamos importar a classe Feedback e a constante contacttype
do arquivo compartilhado/feedback
que acabamos de criar na etapa anterior.
Precisamos disso dentro da nossa aplicação.
Agora, dentro da minha classe aqui,
Eu vou declarar algumas variáveis chamadas FeedbackForm que é do tipo FormGroup.
Este é o modelo de formulário que vai hospedar
o formulário reativo aqui e, em seguida, eu também vou
declarar um feedback variável do tipo Feedback,
então este seria o modelo de dados correspondente.
Mais tarde, este valor Feedback pode ser obtido a partir de um servidor dentro da nossa aplicação,
e, em seguida, também vou declarar o contacttype como uma variável
que é da matriz string contacttype.
Porque eu preciso fazer uso disso dentro da nossa aplicação.
Para construir a forma reativa dentro do construtor,
Eu injetaria o FormBuilder no construtor aqui,
e criaria um método separado chamado
CreateForm que invocarei dentro do construtor,
assim, quando esta classe for construída, o formulário será criado.
Então, o CreateForm será um método dentro do qual criarei o formulário real.
Então, deixe-me adicionar no método CreateForm aqui.
Esta é apenas conveniência Eu poderia simplesmente ter
incluído o código diretamente no próprio construtor,
mas você vai ver que pode haver razões pelas quais você
pode precisar chamar este CreateForm de outros locais.
Então, é melhor colocá-lo em um método separado aqui.
Então, vou criar o formulário aqui, Formulário reativo,
e, em seguida, colocá-lo na variável FeedbackForm que eu declarei anteriormente.
Então, para criar o formulário,
Eu vou ter a ajuda do FormBuilder,
o FB que eu declarei no construtor,
e, em seguida, o FB fornece um método chamado Grupo que me permite
definir um grupo, um FormGroup aqui.
Então, lá dentro, agora eu vou construir as partes da forma lá.
Então, dentro deste grupo,
agora eu posso incluir os vários controles de formulário lá.
Então, eu colocaria primeiro o primeiro nome,
depois o sobrenome.
Observe como os campos dentro do meu formulário são
espelhando de perto os campos dentro da minha classe de feedback.
Eles não precisam corresponder exatamente, mas se eles coincidirem,
então transferir os dados entre
o modelo de dados e os quatro modelos torna-se muito mais simples.
Telnum que eu vou deixar porque uh-
Eu adicionei primeiro nome, sobrenome,
Telnum, e-mail, e concordo, e tipo de contato,
que eu vou definir como nenhum para começar.
Lembre-se de que o tipo de contato é uma matriz de string contendo três deles
, então você deve escolher um deles e, em seguida, mapeá-lo para esta propriedade aqui.
Então, eu vou escolher isso como nenhum e depois mensagem,
que será o feedback que o usuário dá sobre
nosso restaurante mapeado em uma string aqui.
Então, estes são os vários campos que farão parte do nosso formulário aqui.
Assim, uma vez que temos a estrutura do formulário no lugar aqui,
então você percebe que quando este método é chamado,
esta forma será a forma reativa será criada no código aqui.
Agora, precisamos mapear isso na exibição,
no modelo lá.
Então, vamos fazer isso na próxima etapa.
Então, agora, indo para o nosso arquivo de modelo,
no arquivo de modelo de componente de contato,
vamos rolar para baixo e, em seguida, incluir isso em
nosso arquivo de modelo logo após este div aqui,
então temos essa div em nossa visão de contato que contém as informações de localização e assim por diante.
Logo depois disso, eu vou criar outra div dentro
que vamos hospedar a forma reativa lá.
Deixe-me aplicar algumas coisas de layout flex
aqui para a minha div.
Agora, este tamanho de formulário como você pode ver deve ser
uma classe CSS que eu vou criar um pouco mais tarde.
Dentro deste div, eu vou hospedar meu formulário.
Então, uma vez que eu colocar este div no meu arquivo template,
agora deixe-me começar com um título para isso.
Então, diremos: “Envie-nos seu feedback.”
Então, você está buscando o feedback dos visitantes do seu site.
Vamos começar a construir o formulário.
Então, deixe-me começar com o formulário tag
aqui e então vamos construir o formulário dentro desta tag formulário aqui.
Então, para o formulário, a primeira coisa que vou fazer é aplicar
o não validar porque a validação será cuidada por angular,
e, em seguida, também aplicar um grupo de formulário aqui.
Então, observe que este grupo de formulários é aquele que vai me amarrar ao modelo de formulário reativo
que eu criei no meu código aqui.
Então, fazendo isso,
estamos amarrando nesta forma reativa no modelo para
o modelo de formulário correspondente em nosso arquivo datilografado lá.
Então, a maneira como fazemos isso é declaramos o grupo de formulário e formulário de feedback.
Vou mostrar-lhe como você amarra em
os restantes elementos de formulário para
as propriedades correspondentes no modelo de formulário em pouco tempo.
Então, depois de fazermos isso,
vamos colocar em nossos elementos de formulário no lugar dentro deste modelo de formulário.
Então, eu vou declarar um P por aqui e, em seguida, dentro lá eu
vai usar o mat-form-field aqui,
para o qual eu vou aplicar uma classe CSS chamada meia-largura,
e fechar isso fora.
Então, isso colocaria meu primeiro controle formulário no lugar aqui.
Então, aqui, vou colocar a entrada e, em seguida, aplicar o matInput de material angular aqui.
Para amarrar isso na propriedade dentro do meu modelo de formulário,
Eu precisaria fazer FormControlName,
e o primeiro é o primeiro nome.
Então, dessa forma, essa entrada está agora vinculada à propriedade de nome
que eu defini dentro do meu modelo de formulário que eu defini no código.
O primeiro nome e, em seguida, vou definir
o espaço reservado como primeiro nome.
Então, como você esperaria,
este campo de entrada vai ser usado para digitar
o primeiro nome pelo usuário, digite texto.
Curiosamente, você vê que nós não temos o ng-model aqui
ou qualquer uma das variáveis de template e assim por diante na minha forma mais.
Formulários reativos funcionam de forma diferente.
Então, como você vê em formulários reativos,
mapear o grupo de formulários e, em seguida, tentar os nomes de controle de formulário.
Se você estiver criando controles de formulário com a classe de controle de formulário,
você declararia isso como controle de formulário entre colchetes e, em seguida, combiná-lo
com o controle de formulário correspondente que você cria no seu tipo cético.
Mas agora como estamos usando o construtor de formulários,
Eu só sou necessário para amarrar no grupo de formulários como
isso na minha forma para o modelo de formulário correspondente,
e depois o resto deles,
eu declaro como nome de controle de formulário e, em seguida, combiná-los para
as propriedades correspondentes em
o controle de formulário modelo que eu tenho no meu datilografado a forma de código.
Então, isso criará o primeiro campo de nome lá.
Deixe-me copiar isso.
Preciso de um sobrenome aqui.
Então, eu vou copiar isso e, em seguida, dizer nome de controle de formulário é Sobrenome,
eo espaço reservado é Sobrenome,
e do tipo, Texto, aqui.
Eu tinha primeiro nome,
Eu tinha sobrenome e se você olhar para o modelo de controle de formulário,
você verá que depois do primeiro nome e sobrenome,
Eu tenho o número de telefone como o próximo,
então eu vou colar isso aqui.
Em seguida, o nome do controle de formulário aqui é Telnum,
e o espaço reservado é Número de telefone,
e o tipo é Tel.
Enquanto estamos nisso,
Vou amarrar o Necessário a estes, embora isso não seja realmente necessário.
Mas deixe-me adicionar isso lá.
Agora, número de telefone, então eu tenho e-mail.
Então, o próximo campo é Email,
e o espaço reservado é Email,
e o tipo também é.
Então, agora eu tenho primeiro,
sobrenome, número de telefone e e-mail.
A próxima coisa que vou adicionar é uma alternância de slide.
Antes usamos a caixa de seleção.
O slidetoggle é outro controle de forma que o material angular fornece,
que é um pouco diferente olhando do que a caixa de seleção e
Eu pensei que eu vou ilustrar com você usando isso no formulário aqui.
Agora, é aqui que vou usar uma tabela para posicionar esses elementos.
A razão é que,
esses elementos são difíceis de posicionar sem usar uma tabela.
Então, dentro da tabela,
Eu tenho certeza que todos vocês sabem como usar a tabela,
Eu tentei posicioná-los usando o layout flex padrão
e não foi muito bem sucedido com isso.
Então, em vez disso, eu recorri a usar uma tabela para posicionar esses dois itens no meu formulário.
Então, mat-slide-alternar.
Então, o slidetoggle é como a caixa de seleção,
você pode ativá-lo e desativá-lo,
e isso é permitido para selecionar um valor booleano aqui.
Então, slidetoggle e FormControlName está concordando.
Se você se lembra, tínhamos concordo,
que era uma propriedade booleana no controle formulário.
Então, para isso, eu diria,
podemos entrar em contato com você?
Agora, ficará mais claro para você quando você vir a versão final do
neste formulário para entender por que estamos fazendo isso.
Agora, vamos colocar todas as partes na minha forma reativa aqui.
A segunda parte eu vou usar um seleto,
que é suportado através do componente mat-select em material angular.
Então, MD selecione e para isso o espaço reservado,
Vou definir como “Como?”,
e FormControlName com o qual eu vou amarrar este é
“contacttype” e fechar o MD select.
Então, isso me permite criar um elemento de seleção no meu formulário.
Então, o elemento select é algo que me dá
uma lista suspensa a partir da qual eu posso selecionar um deles.
Então, para criar a lista pull-down,
Eu vou usar a opção mat-que está disponível como um componente em material angular.
Então, a opção mat-está incluída dentro do mat-select.
Então, para a opção,
Eu vou fazer *NGFor,
e tenho certeza que você se lembra da diretiva NGFor de mais cedo,
*NGFor “Let ctype of ContactType.”
Agora, você vê por que eu declarei a variável de tipo de contato
no meu código mais cedo e então eu diria, [value] = “ctype”.
Então, estou configurando minha opção na minha seleção aqui e usando a interpolação,
Vou digitar ctype aqui.
Então, isso vai me dar um menu de opções pulldown no meu formulário lá.
Então, essa é a próxima parte e, finalmente,
depois da tabela, Eu vou colocar em uma área de texto aqui.
Então, eu diria p e fechar esse P. Para estilizar a forma reativa,
o elemento P me permite posicionar os itens corretamente.
Então, é por isso que estou usando isso.
Então, como você se lembra,
mat-form-field me permite
incluir um recipiente de entrada aqui e, em seguida, lá dentro, eu vou definir uma área de texto,
que eu aplicar
a diretiva matInput a isso.
Em seguida, o FormControlName, vou dar como “mensagem”.
Então, este elemento de formulário específico permite que o usuário digite
na mensagem de feedback do meu restaurante.
Então, espaço reservado “Seu feedback”,
e, em seguida, eu vou dar a área de texto um tamanho de
12 linhas aqui e, em seguida, fechar a área de texto.
Então, aqui temos uma área de texto com as 12 linhas.
Então, que completa a maior parte do formulário.
Desculpe, isso deve estar fora da tabela.
Precisamos de um botão para enviar o formulário.
Então, ali mesmo, eu vou incluir um botão do tipo = “enviar” e
este botão enviar eu vou aplicar
o botão mat-e também aplicar o class="background-primary”.
Você já me viu aplicando isso ao botão no exercício anterior também,
tipo semelhante de botão.
Então, agora meu formulário está quase pronto.
Você poderia adicionar algumas classes CSS ao componente de contato.
As três classes que eu usei é full-width,
isso é usado para definir o tamanho dos elementos lá.
Então, largura total 95 por cento, meia largura.
Então, isso me permite dimensionar os elementos corretamente,
45 por cento meia largura e, em seguida, o tamanho do formulário.
Então, eu uso essas classes CSS no meu formulário.
Então, com isso, vamos salvar as alterações,
e dar uma olhada rápida no formulário em nosso aplicativo.
Indo para o navegador,
na vista de contato,
ao rolar para baixo você agora vê o formulário no lugar na vista de contato aqui.
Então, você vê o envie-nos seu feedback,
o primeiro nome, o sobrenome, o número de telefone,
o e-mail e o slide alternar aqui,
para que você veja o slide alternar no lugar lá e então este é este seleto.
A seleção me permite selecionar um desses três.
O valor padrão é nenhum e, em seguida, a área de texto aqui,
me permite digitar meus comentários de comentários aqui e, em seguida, o botão enviar.
Então, isso completa o formulário reativo em
minha inscrição, mas quando você clica no botão Enviar,
você não será capaz de enviar este formulário.
Então, precisamos adicionar o ngSubmit ao nosso formulário no template
e, em seguida, adicionar um método em nosso arquivo de script de tipo.
Indo para o nosso código,
para o formulário aqui,
junto com o formulário novalidate FormGroup,
Eu vou adicionar em um ngSubmeter ao formulário.
Vou chamar o método como método onSubmit.
Então, com isso, meu formulário agora está pronto para enviar informações.
Preciso ir para os componentes de contato, arquivo de script do tipo
e, em seguida, criar o método onSubmit aqui.
Então, no método onSubmit,
acontece que o modelo de formulário é exatamente o mesmo que os modelos de dados,
para que eu possa simplesmente tomar o valor do modelo de formulário.
Então, quando você tem um modelo de formulário como este formulário de feedback,
o formulário de feedback dá uma propriedade chamada value,
que me permite recuperar o valor atual de todos estes do meu formulário de feedback.
Então isso vai formar um objeto JavaScript,
que eu posso então mapear para o objeto JavaScript feedback.
Acontece que, ambos têm exatamente a mesma estrutura,
o modelo de dados e o modelo de formulário.
Então, é por isso que eu sou capaz de carregar rapidamente o valor
diretamente no modelo de dados quando o usuário envia o formulário.
Se o seu modelo de dados é um pouco diferente do modelo de formulário,
você precisa mapear em propriedades individuais explicitamente e
que pode ser feito dentro deste método lá.
Só para mostrar que o formulário foi enviado corretamente,
Vou registrar o valor no console, o console JavaScript.
Então eu diria, this.FeedbackForm.reset.
O método de redefinição permite que você redefina o formulário para seu estado normal,
removendo todas as entradas que você fez no formulário.
Assim, uma vez que o usuário envia,
você normalmente capturaria os valores e, em seguida, redefiniria o formulário para
que a entrada adicional pode ser feita como um formulário separado.
Então esse é o método de reset que vamos usar aqui.
Então, com essas mudanças,
vamos salvar as mudanças e, em seguida, ir e ver nosso formulário em ação.
Uma última coisinha que eu quero adicionar ao meu modelo é mostrar
você os valores do formulário dentro do meu próprio formulário,
embora em um aplicativo real,
você não estaria fazendo isso, mas eu só queria ilustrar para você como
você pode ver os valores do FeedbackForm diretamente aqui,
do Modelo FeedbackForm.
Então, eu posso fazer aqui dentro.
Eu posso dizer FeedbackForm.value e canalizado através de json para mostrar aqui.
Da mesma forma, eu posso fazer aqui, FeedbackForm.
Há outra propriedade associada a esse modelo de formulário chamado status,
que me mostra o status do formulário neste momento,
se ele é válido ou inválido.
Então, eu vou adicionar esses dois no meu formulário aqui,
para que isso seja mostrado no meu modelo.
Isto é apenas para lhe dar uma visão instantânea do que
o modelo de formulário contém no meu arquivo de script de tipo.
Vamos salvar as alterações e ir e dar uma olhada rápida no nosso formulário.
Voltando ao nosso navegador,
agora você pode ver que os valores do formulário estão sendo mostrados
aqui e o formulário está em boa forma para nos permitir digitar os valores.
Então vamos digitar alguns valores aleatórios aqui e você pode
imediatamente ver o valor está sendo refletido no modelo FeedbackForm lá,
direita na parte superior e e-mail.
Não importa, basta digitar algo.
Então, este interruptor de alternância,
você pode ver que quando você ligá-lo e desligar,
o concordo transformar alterações de falso para verdadeiro.
Então deixe-me deixá-lo em true e, em seguida, a seleção.
Deixe-me selecionar e-mail e, em seguida, você verá que o tipo de contato aqui mudou para e-mail.
Então, é assim que você selecionaria para alterar o valor.
Então, vamos dizer e-mail e, em seguida, aqui,
podemos digitar a mensagem.
Algum texto aleatório aqui e você seria
capaz de ver que o texto aleatório é refletido na mensagem lá.
Vamos enviar o formulário.
Então, quando você clica em Enviar você vê imediatamente no console,
o valor sendo impresso aqui,
neste objeto aqui.
Então você pode navegar para ver todas as propriedades desse objeto,
o modelo de formulário de feedback.
Então, esta é uma ilustração de uma forma reativa dentro da nossa aplicação.
Isso conclui este exercício.
Neste exercício, vimos como podemos criar
uma forma reativa dentro da nossa aplicação Angular.
Este é também um bom ponto em que você pode fazer um commit do Git com a mensagem,
reativo forma parte um.