Sự khác biệt thực tế giữa các hình thức hướng mẫu và phản ứng là gì?

Tôi đã đọc về API biểu mẫu mới của Angular2 và dường như có hai cách tiếp cận trên các biểu mẫu, một là các biểu mẫu được điều khiển theo mẫu khác là các biểu mẫu phản ứng hoặc theo mô hình.

Tôi muốn biết sự khác biệt thực tế giữa hai loại, không phải là sự khác biệt về cú pháp (rõ ràng) mà là cách sử dụng thực tế và cách tiếp cận nào có lợi hơn trong các kịch bản khác nhau. Ngoài ra, có đạt được hiệu suất trong việc lựa chọn cái này hơn cái kia không? Và nếu có, tại sao?

Các mẫu tính năng hướng mẫu

• Dễ sử dụng
• Thích hợp cho các kịch bản đơn giản và thất bại cho các kịch bản phức tạp
• Tương tự như AngularJS
• Liên kết dữ liệu hai chiều (sử dụng [(NgModel)]cú pháp)
• Mã thành phần tối thiểu
• Tự động theo dõi biểu mẫu và dữ liệu của nó (được xử lý bởi Angular)
• Kiểm tra đơn vị là một thách thức khác

Các tính năng hình thức phản ứng

• Linh hoạt hơn, nhưng cần thực hành nhiều
• Xử lý mọi tình huống phức tạp
• Không có ràng buộc dữ liệu nào được thực hiện (mô hình dữ liệu bất biến được hầu hết các nhà phát triển ưa thích)
• Mã thành phần nhiều hơn và đánh dấu HTML ít hơn
• Biến đổi phản ứng có thể được thực hiện như
  • Xử lý một sự kiện dựa trên thời gian phát hành
  • Xử lý các sự kiện khi các thành phần khác biệt cho đến khi thay đổi
  • Thêm các yếu tố linh hoạt
• Kiểm tra đơn vị dễ dàng hơn

Tôi nghĩ rằng nó thảo luận về mã , chiến lược và trải nghiệm người dùng .

Tóm lại, chúng tôi thay đổi cách tiếp cận dựa trên mẫu dễ dàng hơn để làm việc với nó, thành phản ứng (theo cách tiếp cận theo mô hình) để cho chúng tôi kiểm soát nhiều hơn , điều đó dẫn đến một hình thức có thể kiểm tra tốt hơn bằng cách tận dụng sự tách rời giữa HTML (thiết kế / Nhóm CSS có thể hoạt động ở đây) và các quy tắc kinh doanh của thành phần (thành viên chuyên gia angular / js) và để cải thiện trải nghiệm người dùng với các tính năng như chuyển đổi phản ứng, xác thực tương quan và xử lý các kịch bản phức tạp như quy tắc xác thực thời gian chạy và sao chép trường động.

Bài viết này là một tài liệu tham khảo tốt về nó: Các hình thức 2 góc - Phương pháp hướng mẫu và hướng mẫu

Dưới đây là tóm tắt về so sánh giữa các hình thức điều khiển và phản ứng mẫu được giải thích bởi DeborahK (Deborah Kurata),

Các hình thức phản ứng:

• tái sử dụng,
• mạnh mẽ hơn,
• kiểm tra được
• khả năng mở rộng hơn

Biểu mẫu dựa trên mẫu:

• dễ dàng để thêm
• ít khả năng mở rộng,
• yêu cầu hình thức cơ bản

Trong bản tóm tắt , nếu hình thức là rất quan trọng cho ứng dụng của bạn, hoặc mẫu phản ứng được sử dụng trong ứng dụng của bạn, bạn nên sử dụng các hình thức phản ứng .Otherwise ứng dụng của bạn có yêu cầu cơ bản và đơn giản cho các hình thức như đăng nhập, bạn nên sử dụng các hình thức mẫu-driven .

Có một liên kết chính thức góc

Cách dễ nhất để biết sự khác biệt giữa các hình thức Phản ứng và các hình thức dựa trên Mẫu

tôi có thể nói nếu bạn muốn kiểm soát nhiều hơn và khả năng mở rộng hãy đi với các hình thức Phản ứng

Mẫu hướng dẫn mẫu:

được nhập bằng FormsModule

Các biểu mẫu được xây dựng bằng chỉ thị ngModel chỉ có thể được kiểm tra trong thử nghiệm từ đầu đến cuối bởi vì điều này đòi hỏi phải có sự hiện diện của DOM

Giá trị biểu mẫu sẽ có sẵn ở hai nơi khác nhau: mô hình xem tức là ngModel

Xác thực biểu mẫu, khi chúng tôi thêm ngày càng nhiều thẻ xác thực vào một trường hoặc khi chúng tôi bắt đầu thêm xác thực trường chéo phức tạp, khả năng đọc của biểu mẫu sẽ giảm

Các hình thức phản ứng:

Thường có thể được sử dụng cho các ứng dụng quy mô lớn

logic xác thực phức tạp thực sự đơn giản hơn để thực hiện

được nhập bằng ReactiveFormsModule

Giá trị biểu mẫu sẽ có sẵn ở hai nơi khác nhau: mô hình xem và Formgroup

Kiểm tra đơn vị dễ dàng: Chúng ta có thể làm điều đó chỉ bằng cách khởi tạo lớp, đặt một số giá trị trong các điều khiển biểu mẫu và thực hiện các xác nhận đối với trạng thái hợp lệ toàn cục của biểu mẫu và trạng thái hợp lệ của mỗi điều khiển.

Sử dụng Đài quan sát để lập trình phản ứng

Ví dụ: trường mật khẩu và trường xác nhận mật khẩu cần phải giống hệt nhau

Cách phản ứng: chúng ta chỉ cần viết một hàm và cắm nó vào FormControl

Cách hướng mẫu: chúng ta cần xác định một lệnh và bằng cách nào đó chuyển nó thành giá trị của hai trường

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