Şablon güdümlü ve reaktif formlar arasındaki pratik farklılıklar nelerdir?

Angular2 new Forms API hakkında okudum ve formlar üzerinde iki yaklaşım var gibi görünüyor, biri Şablon odaklı formlar diğer reaktif veya model odaklı formlar.

İkisi arasındaki pratik farkı bilmek istiyorum, sözdizimindeki farkı (açıkçası) değil, pratik kullanımları ve hangi yaklaşımların farklı senaryolarda daha fazla fayda sağladığını bilmek istiyorum. Ayrıca, birini diğerinden seçerken bir performans kazancı var mı? Ve eğer evetse, neden?

Şablon Tahrikli Form Özellikleri

• Kullanımı kolay
• Basit senaryolar için uygun ve karmaşık senaryolar için başarısız
• AngularJS benzer
• İki yönlü veri bağlama ( [(NgModel)]sözdizimi kullanarak )
• Minimum bileşen kodu
• Formun ve verilerinin otomatik olarak izlenmesi (Açısal olarak işlenir)
• Birim testi başka bir zorluktur

Reaktif Formların Özellikleri

• Daha esnek, ancak çok fazla uygulamaya ihtiyaç var
• Karmaşık senaryoları işler
• Veri bağlaması yapılmaz (çoğu geliştirici tarafından tercih edilen değişmez veri modeli)
• Daha fazla bileşen kodu ve daha az HTML işaretlemesi
• Reaktif dönüşümler mümkün
  • Bir olayı geri dönme süresine göre işleme
  • Bileşenler değiştirilene kadar farklı olduğunda olayları işleme
  • Dinamik olarak eleman ekleme
• Daha kolay birim testi

Kod , strateji ve kullanıcı deneyimi hakkında bir tartışma olduğunu düşünüyorum .

Özetle , onunla çalışmak daha kolay olan şablon odaklı yaklaşım , bize daha fazla kontrol sağlamak için reaktif (model odaklı yaklaşımda) olarak değiştiriyoruz , bu da HTML (tasarım / CSS ekibi burada çalışabilir) ve bileşenin iş kurallarını (açısal / js uzman üyeleri) ve reaktif dönüşümler, ilişkili doğrulamalar ve çalışma zamanı doğrulama kuralları ve dinamik alanların çoğaltılması gibi karmaşık senaryoları ele alan kullanıcı deneyimini iyileştirmek için .

Bu makale bu konuda iyi bir referanstır: Açısal 2 Form - Şablon Odaklı ve Model Odaklı Yaklaşımlar

İşte DeborahK (Deborah Kurata) tarafından iyi açıklanmış şablon güdümlü ve reaktif formlar arasındaki karşılaştırmanın özeti,

Reaktif formlar:

• Tekrar kullanılabilir,
• daha sağlam,
• test edilebilir,
• daha ölçeklenebilir

Şablon odaklı formlar:

• eklenmesi kolay,
• daha az ölçeklenebilir,
• temel form gereksinimleri

Özet olarak , formlar uygulamanız için çok önemliyse veya uygulamanızda reaktif desen kullanılıyorsa, reaktif formlar kullanmalısınız.Aksi takdirde , uygulamanız oturum açma gibi formlar için temel ve basit bir gereksinime sahipse, şablona dayalı formlar kullanmalısınız .

Açısal bir resmi bağlantı var

Reaktif formlar ve Şablon güdümlü formlar arasındaki farkı bilmenin en kolay yolu

daha fazla kontrol ve ölçeklenebilirlik istiyorsanız reaktif formlarla gidin diyebilirim

Şablonla Çalışan Formlar:

FormsModule kullanılarak içe aktarıldı

NgModel yönergesi ile oluşturulan formlar yalnızca uçtan uca testte test edilebilir, çünkü bu bir DOM'un varlığını gerektirir

Form değeri iki farklı yerde kullanılabilir: görünüm modeli yani ngModel

Bir alana giderek daha fazla doğrulayıcı etiketi eklediğimizde veya karmaşık çapraz alan doğrulamaları eklemeye başladığımızda form doğrulaması, formun okunabilirliği azalır

Reaktif Formlar:

Genellikle büyük ölçekli uygulamalar için kullanılabilir

karmaşık doğrulama mantığının uygulanması aslında daha basittir

ReactiveFormsModule kullanılarak içe aktarıldı

Form değeri iki farklı yerde kullanılabilir: görünüm modeli ve FormGroup

Kolay Ünite Testi: Bunu sadece sınıfı somutlaştırarak, form kontrollerinde bazı değerler ayarlayarak yapabilir ve form global geçerli durumu ve her kontrolün geçerlilik durumu hakkında iddialarda bulunabiliriz.

Gözlemlenebilirlerin reaktif programlama için kullanımı

Örneğin: bir şifre alanı ve bir şifre onay alanının aynı olması gerekir

Reaktif yol: sadece bir işlev yazmamız ve FormControl'e takmamız gerekiyor

Şablon Odaklı Yol: bir yönerge tanımlamamız ve bir şekilde iki alanın değerini geçirmemiz gerekiyor

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