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

157

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ê?

angular angular2-forms

— gdyrrahitis
fonte

3

Outro ponto a considerar é o formulário Reativo é síncrono e o formulário controlado por Modelo é assíncrono. Ambos os formulários têm suas próprias fraquezas e pontos fortes. Portanto, é necessário considerar algumas coisas antes de escolher qual formulário usar em seu aplicativo, ex. complexidade do aplicativo etc. Você também pode usar os dois formulários no aplicativo.

— Vijay Singh

171

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 [(NgModel)]sintaxe)
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

— Aravind
fonte

1

O lado inferior do teste de unidade ainda é aplicável aos formulários acionados por modelo?

— danger89

@ danger89 Acho que sim. O motivo pelo qual o teste de unidade é um problema para os formulários orientados a modelos é porque são alterações de valor e as verificações de validade são assíncronas, o que pode causar dores de cabeça quando se trata de teste de unidade.

— Alex Lockwood

2

Eu adicionaria validação de formulário ao mix acima. Os modelos são validados através directivas onde reactivo é por função

— Kieran

11

o que exatamente "lida com cenários complexos" significa quando se refere a formas reativas? vindo de AngularJS, eu construí formas complexas muito bem, por isso é difícil para mim ver como modelo formas driven "falhar por cenários complexos"

— jtate

@ jtate eu concordo com você jtate, alguém tem alguma idéia sobre qual deles ajuda a melhorar o desempenho, o tempo de carregamento, etc?

— Joel Joseph

24

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

— Richard Lee
fonte

24

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

— Sajeetharan
fonte

3

Formas reativas:

reutilizável,
mais robusto,
testável,
mais escalável

Formulários orientados a modelos:

fácil de adicionar,
menos escalável,
requisitos básicos de formulário

Em resumos , se os formulários são muito importantes para o seu aplicativo ou se o padrão reativo for usado, você deve usar formulários reativos. Caso contrário, seu aplicativo possui requisitos básicos e simples para formulários como o login, você deve usar formulários controlados por modelo .

Existe um link oficial angular

— fgul
fonte

0

A maneira mais fácil de saber a diferença entre formulários reativos e formulários orientados a modelos

posso dizer que se você quiser mais controle e escalabilidade, vá com formas reativas

— abhinavxeon
fonte

0

Formulários acionados por modelo:

importado usando FormsModule

Os formulários criados com a diretiva ngModel só podem ser testados em um teste de ponta a ponta, porque isso requer a presença de um DOM

O valor do formulário estaria disponível em dois locais diferentes: o modelo de visualização, ou seja, ngModel

Validação de formulário, à medida que adicionamos mais e mais tags validadoras a um campo ou quando começamos a adicionar validações complexas de campos cruzados, a legibilidade do formulário diminui

Formas reativas:

Pode geralmente usado para aplicações em grande escala

lógica de validação complexa é realmente mais simples de implementar

importados usando ReactiveFormsModule

O valor do formulário estaria disponível em dois locais diferentes: o modelo de visualização e o FormGroup

Teste fácil de unidade: podemos fazer isso apenas instanciando a classe, definindo alguns valores nos controles do formulário e executando asserções no estado válido global do formulário e no estado de validade de cada controle.

Uso de Observables para programação reativa

Por exemplo: um campo de senha e um campo de confirmação de senha precisam ser idênticos

Maneira reativa: basta escrever uma função e conectá-la ao FormControl

Maneira Orientada a Modelo: precisamos definir uma diretiva e de alguma forma transmitir o valor dos dois campos

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

— Lalith-AIS
fonte