Apa perbedaan praktis antara formulir yang digerakkan template dan reaktif?

157

Saya telah membaca tentang Angular2 Forms API baru dan tampaknya ada dua pendekatan pada formulir, salah satunya adalah formulir yang digerakkan Templat lainnya adalah formulir yang reaktif atau yang digerakkan oleh model.

Saya ingin tahu perbedaan praktis antara keduanya, bukan perbedaan dalam sintaks (jelas) tetapi kegunaan praktis dan pendekatan mana yang lebih menguntungkan dalam skenario yang berbeda. Juga, apakah ada keuntungan kinerja dalam memilih satu dari yang lain? Dan jika ya, mengapa?

angular angular2-forms gdyrrahitis
sumber
3
Hal lain yang perlu dipertimbangkan adalah formulir Reaktif sinkron dan formulir Template didorong asinkron. Kedua bentuk memiliki kelemahan dan kekuatan mereka sendiri. Jadi perlu mempertimbangkan beberapa hal sebelum memilih bentuk yang akan digunakan dalam aplikasi Anda mantan. kompleksitas aplikasi dll. Anda juga dapat menggunakan kedua formulir dalam aplikasi.
Vijay Singh

Jawaban:

171

Templat Formulir Fitur Driven

  • Mudah digunakan
  • Cocok untuk skenario sederhana dan gagal untuk skenario kompleks
  • Mirip dengan AngularJS
  • Pengikatan data dua arah (menggunakan [(NgModel)]sintaks)
  • Kode komponen minimal
  • Jalur otomatis formulir dan datanya (ditangani oleh Angular)
  • Pengujian unit adalah tantangan lain

Fitur Bentuk Reaktif

  • Lebih fleksibel, tetapi butuh banyak latihan
  • Menangani skenario kompleks
  • Tidak ada pengikatan data yang dilakukan (model data yang tidak dapat diubah disukai oleh kebanyakan pengembang)
  • Lebih banyak kode komponen dan sedikit markup HTML
  • Transformasi reaktif dapat dimungkinkan seperti
    • Menangani acara berdasarkan waktu debounce
    • Menangani acara ketika komponen berbeda hingga berubah
    • Menambahkan elemen secara dinamis
  • Pengujian unit yang lebih mudah
Aravind
sumber
1
Apakah unit pengujian sisi bawah masih berlaku untuk Formulir Berbasis Template?
hazard89
@ hazard89 Kurasa begitu. Alasan pengujian unit adalah masalah untuk formulir yang digerakkan template adalah karena mereka perubahan nilai dan pemeriksaan validitas tidak sinkron, yang dapat menyebabkan sakit kepala ketika datang ke unit testing.
Alex Lockwood
2
Saya akan menambahkan validasi formulir ke dalam campuran di atas. Template divalidasi melalui arahan di mana reaktif adalah berdasarkan fungsi
Kieran
11
apa sebenarnya yang dimaksud dengan "Menangani skenario kompleks" ketika merujuk ke formulir reaktif? berasal dari AngularJS, saya telah membangun formulir kompleks dengan baik, jadi sulit bagi saya untuk melihat bagaimana formulir yang digerakkan templat "gagal untuk skenario kompleks"
jtate
@jtate saya setuju dengan Anda jtate, apakah ada yang punya ide yang membantu meningkatkan kinerja, memuat waktu dll?
Joel Joseph
24

Saya pikir ini adalah diskusi tentang kode , strategi , dan pengalaman pengguna .

Singkatnya kami mengubah pendekatan berbasis template yang lebih mudah untuk dikerjakan dengannya, menjadi reaktif (dalam pendekatan berbasis model) untuk memberi kami lebih banyak kontrol , yang menghasilkan bentuk yang dapat diuji lebih baik dengan memanfaatkan decoupling antara HTML (desain / Tim CSS dapat bekerja di sini) dan aturan bisnis komponen (angular / js spesialis anggota) dan untuk meningkatkan pengalaman pengguna dengan fitur-fitur seperti transformasi reaktif, validasi berkorelasi dan menangani skenario kompleks seperti aturan validasi runtime dan duplikasi bidang dinamis.

Artikel ini adalah referensi yang bagus tentang hal ini: Formulir 2 Sudut - Pendekatan Berbasis Template dan Pendekatan Berbasis Model

Richard Lee
sumber
24

Berikut ini ringkasan perbandingan antara formulir yang digerakkan oleh template dan bentuk reaktif yang dijelaskan oleh DeborahK (Deborah Kurata) dengan baik, masukkan deskripsi gambar di sini

Sajeetharan
sumber
3

Bentuk reaktif:

  • dapat digunakan kembali,
  • lebih kuat,
  • dapat diuji,
  • lebih scalable

Formulir yang digerakkan template:

  • mudah ditambahkan,
  • kurang scalable,
  • persyaratan bentuk dasar

Dalam ringkasan , jika formulir sangat penting untuk aplikasi Anda, atau pola reaktif digunakan di aplikasi Anda, Anda harus menggunakan formulir reaktif. Selain itu aplikasi Anda memiliki persyaratan dasar dan sederhana untuk formulir seperti masuk, Anda harus menggunakan formulir yang digerakkan oleh template .

Ada tautan resmi sudut

fgul
sumber
0

Cara termudah untuk mengetahui perbedaan antara formulir Reaktif dan formulir yang digerakkan Templat

saya dapat mengatakan jika Anda ingin lebih banyak kontrol dan skalabilitas pergi dengan bentuk Reaktif

masukkan deskripsi gambar di sini

abhinavxeon
sumber
0

Formulir yang Didorong Template:

diimpor menggunakan FormsModule

Bentuk yang dibangun dengan direktif ngModel hanya dapat diuji dalam tes ujung ke ujung karena ini memerlukan kehadiran DOM

Nilai formulir akan tersedia di dua tempat berbeda: model tampilan yaitu ngModel

Validasi formulir, saat kami menambahkan semakin banyak tag validator ke bidang atau ketika kami mulai menambahkan validasi lintas-bidang yang kompleks, keterbacaan formulir berkurang

Formulir Reaktif:

Umumnya dapat digunakan untuk aplikasi skala besar

logika validasi kompleks sebenarnya lebih mudah untuk diimplementasikan

diimpor menggunakan ReactiveFormsModule

Nilai formulir akan tersedia di dua tempat berbeda: model tampilan dan FormGroup

Uji Mudah ke Unit: Kita dapat melakukannya hanya dengan membuat instance kelas, menetapkan beberapa nilai dalam bentuk kontrol dan melakukan pernyataan terhadap bentuk status valid global dan status validitas setiap kontrol.

Penggunaan Observables untuk pemrograman reaktif

Misalnya: bidang kata sandi dan bidang konfirmasi kata sandi harus identik

Cara reaktif: kita hanya perlu menulis fungsi dan hubungkan ke FormControl

Template-Driven Way: kita perlu mendefinisikan arahan dan entah bagaimana memberikannya nilai dari dua bidang

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

Lalith-AIS
sumber