[MÚSICA]
Acabamos de completar o aprendizado sobre formulários orientados por modelos em
angular na lição anterior.
Angular também suporta outra maneira de projetar formas chamadas como formas reativas,
as formas reativas usam o estilo reativo de programação para formas de suporte.
Vamos falar sobre programação reativa brevemente em
uma das lições posteriores neste módulo.
Mas agora, vamos lidar com formas reativas e
ver como podemos projetar formas reativas em angular e
quais são as características únicas de fazer formas reativas em angular a seguir.
O estilo reativo de programação defende o gerenciamento explícito de
dados fluindo entre o modelo de dados não-UI e o modelo de formulário
orientado para UI e esta é a abordagem que as formas reativas assumem Angular.
Agora isso pode não fazer muito sentido para você neste momento, mas à medida que completamos este exercício
e a palestra, ficará ainda mais claro para você
por que a abordagem reativa se adequa a esse design de forma em certos contextos.
Agora, na abordagem reativa, criamos uma árvore de objetos de controle de forma angular
, dentro da classe de componente.
Agora, nos formulários orientados por modelo que você já viu anteriormente,
nós projetamos os formulários usando a abordagem de modelo HTML, então
todos os controles de formulário somos colocados nesse formulário no modelo HTML e
estamos primariamente gerenciar dados e eles estamos ligados ao seu objeto componente
através do NG modelo diretamente.
Nesta abordagem, vamos criar essa estrutura de formulário em nosso componente e
, em seguida, amarrar a estrutura de formulário em controles firmes em nosso modelo, então
vamos vincular a árvore de formulário que
criar dentro de nossa classe de componente para os elementos de forma nativa
dentro de nosso arquivo de modelo lá.
Então, nesta abordagem, a classe componente tem acesso
imediato ao modelo de dados, bem como à estrutura de controle de formulário e assim
podemos então pegar o modelo de dados e empurrá-lo para a estrutura de controle de formulário e
correspondentemente tirar as informações da estrutura de controle de formulário e
então mapeá-lo para o modelo de dados.
Assim, o modelo de dados vindo do back-end pode ser mapeado para formar a estrutura de controle
que é refletido na exibição através desse modelo
e a ponte entre eles é feita dentro da classe de componente
criando a estrutura de formulário dentro da classe componente.
Agora, isso não faz muito sentido para você neste momento, mas
quando fizermos o exercício, ficará ainda mais claro para você como essa ligação
entre o modelo de dados e a estrutura de controle firme pode ser realizada
dentro da classe de componente no código de script de tipo do classe de componentes.
Então, é aqui que vamos alavancar padrões reativos, testes e validação
para grande vantagem, então esta abordagem de forma
reativa suporta padrões reativos de programação, como eu disse, vamos falar
programação reativa mais reativa um pouco mais tarde neste módulo.
Além disso, o fato de criarmos os formulários no código
significa que o teste e a avaliação de formulários se tornam muito mais fáceis.
Formulários orientados por modelo são muito difíceis de testar
porque grande parte da estrutura está no código do modelo, então
a abordagem reativa se presta muito melhor para testes de unidade e
também para validação de formulário como veremos um pouco mais tarde no exercício.
Vamos refletir brevemente sobre algumas das vantagens de usar formas reativas.
Uma das vantagens é que os valores na forma em que os elementos
estão imediatamente disponíveis e síncronos com o código abstrato.
Em forma orientada modelo assume ciclo para
quaisquer alterações escritas o modelo para ser refletido em seu código lá,
mas na abordagem reativa, o bit de sincronização, os dados e
a vista é firmemente mantida.
Em segundo lugar, as formas reativas, como já mencionei,
são mais fáceis de fazer testes de unidade e isso se torna muito crucial
quando você está projetando um ângulo muito complexo replicações.
Os formulários reativos são suportados para algumas classes
que estão disponíveis para a biblioteca de formulários angulares.
Um deles é a classe FormControl que alimenta o controle de forma individual é
que incluímos em nossa forma os elementos individuais e também nos permite
rastrear o valor desses limites e fazer validação desses elementos.
O FormGroup é um grupo de FormControl, portanto
quando você deseja organizar FormControls juntos como um grupo e
, em seguida, rastrear informações sobre esses grupos como um todo, então o FormGroup
permite aglomerar um grupo de FormControls juntos.
Além disso, também temos uma classe AbstractControl que é um resumo
classe baseada para classes FormControl, que também pode ser usado para nossa vantagem
embora nós queremos vê-los especificamente no exercício mais tarde,
mas vamos voltar para usá-los em um momento posterior.
E também temos uma classe FormarRay que permite que você defina
uma matriz numericamente indexada de instâncias AbstractControl,
novamente, tanto o AbstractControl quanto o FormarRay, não examinaremos explicitamente
nesta lição particular, mas vamos vê-los mais tarde no curso.
Outro aspecto interessante das formas reativas
é a disponibilidade do FormBuilder.
A classe FormBuilder permite o uso para criar os formulários dentro do nosso código TypeScript e
, em seguida, ser capaz de amarrá-los com os controles de modelo lá.
Então, para usar a classe Form Builder você importar o Form Builder a partir dos formulários angular
e, em seguida, lá depois, você pode usar o construtor de formulário para construir o formulário,
como se você usar e fazer o que suas classes de conversor de formulário e as classes de grupo de formulário
como vimos no slide anterior que código é um pouco mais elaborado.
Mas usando a classe FormBuilder, ele reduz a repetição inclítica de em seu código
e o torna muito mais compacto para definir fontes.
Usaremos a classe FormBuilder como a abordagem para
formas de construção no exercício que se segue e
este exemplo é derivado do exercício que você fará logo após esta palestra.
Então aqui você pode ver que nós construímos um formulário, como um grupo desses elementos de controle de formulário
e cada um deles tendo nome específico e também o valor dado a eles.
Ao criar o modelo de formulário em nosso código datilografado,
você não preenche automaticamente o modelo de formulário, você precisa preencher exclusivamente
o modelo de formulário especialmente se você obter os dados em um modelo de dados,
então o modelo de dados precisa ser mapeado em seu modelo de formulário para preencher os valores,
para que o e o modelo de dados são mantidos separados em formas reativas.
Nos formulários orientados por modelo, você viu que estamos tentando diretamente os objetos de dados
do arquivo de modelo para nosso código abstrato.
Então, neste caso, o formulário e o modelo de dados são mantidos separados, então
todas as alterações que você fizer nos elementos DOM
em seu formulário fluirão para o modelo de formulário e
você tem que refletir explicitamente os dados do formulário de volta para
esse modelo de dados, mesmo através de um serviço ou qualquer meio que você escolher,
então essa separação nos ajuda a projetar nosso código muito melhor, como veremos mais tarde.
Dois métodos estão disponíveis para preencher um modelo de formulário a partir de um modelo de dados.
Temos o método setValue (), que nos permite atribuir cada controle de formulário
a um valor específico do modelo de dados ou temos um patchValue (),
que permite atualizar apenas alguns controles dentro do seu modelo de formulário.
Assim, uma vez que você obter o modelo de dados do back-end, do modelo de dados,
você pode aplicar os valores em seu modelo de formulário ou mapear os valores de
seu modelo de dados em seu modelo de formulário, muitas vezes, vamos criar o modelo de dados,
que razoavelmente espelha de perto a estrutura do formulário.
No exercício que se segue você veria que eu tenho um modelo de dados
que é baseado em uma classe,
que espelha muito de perto o modelo de formulário que usamos dentro do nosso exemplo lá.
Com esta rápida compreensão de formas reativas, vamos agora prosseguir para o exercício
onde vamos dobrar uma forma reativa dentro de nossa aplicação angular e
ao longo do caminho consolidar algumas das terminologia e
também algumas das idéias que acabamos de explorar nesta lição.
[MÚSICA]