touched - validators angular cpf




Quais são as diferenças práticas entre formulários orientados a modelos e reativos? (3)

Aqui está o resumo da comparação entre formulários orientados a modelos e reativos, explicado por DeborahK (Deborah Kurata),

Eu tenho lido sobre a nova API de formulários do Angular2 e parece que existem duas abordagens em formulários: um é um formulário orientado a modelos e outro é reativo ou orientado a modelos.

Gostaria de saber a diferença prática entre os dois, não a diferença na sintaxe (obviamente), mas nos usos práticos e qual abordagem se beneficia mais em diferentes cenários. Além disso, há um ganho de desempenho na escolha de um sobre o outro? E se sim, por quê?


Eu acho que é uma discussão sobre código , estratégia e experiência do usuário .

Em resumo, mudamos para uma abordagem orientada a modelos , que é mais fácil de trabalhar com ela, para reativa (na abordagem orientada a modelos) para nos dar mais controle , o que resulta em uma forma melhor testável, aproveitando a dissociação entre o HTML (design / A equipe de CSS pode trabalhar aqui) e as regras de negócios do componente (membros especializados em angular / js) e para melhorar a experiência do usuário com recursos como transformações reativas, validações correlacionadas e lidar com cenários complexos como regras de validação de tempo de execução e duplicação de campos dinâmicos.

Este artigo é uma boa referência: Formulários Angular 2 - Abordagem orientada a modelo e orientada a modelo


Recursos de formulários acionados por modelo

  • Fácil de usar
  • Adequado para cenários simples e falha em cenários complexos
  • Semelhante ao AngularJS
  • Ligação de dados bidirecional (usando a sintaxe [(NgModel)] )
  • Código mínimo do componente
  • Rastreamento automático do formulário e seus dados (manipulados pela Angular)
  • Teste de unidade é outro desafio

Recursos de formulários reativos

  • Mais flexível, mas precisa de muita prática
  • Lida com cenários complexos
  • Nenhuma ligação de dados é feita (modelo de dados imutável preferido pela maioria dos desenvolvedores)
  • Mais código de componente e menos marcação HTML
  • Transformações reativas podem ser possíveis, como
    • Manipulando um evento com base em um tempo de debounce
    • Tratamento de eventos quando os componentes são distintos até serem alterados
    • Adicionando elementos dinamicamente
  • Teste de unidade mais fácil




angular2-forms