อะไรคือความแตกต่างในทางปฏิบัติระหว่างแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลตและแบบตอบสนอง?

ฉันได้อ่านเกี่ยวกับ Angular2 Forms API ใหม่และดูเหมือนว่ามีสองวิธีในแบบฟอร์มหนึ่งคือแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลตอื่น ๆ เป็นแบบโต้ตอบหรือแบบที่ขับเคลื่อนด้วยแบบจำลอง

ฉันต้องการทราบความแตกต่างในทางปฏิบัติระหว่างทั้งสองไม่ใช่ความแตกต่างในไวยากรณ์ (ชัด) แต่ใช้จริงและวิธีการที่เป็นประโยชน์มากขึ้นในสถานการณ์ที่แตกต่างกัน นอกจากนี้ยังมีการเพิ่มประสิทธิภาพการทำงานในการเลือกหนึ่งมากกว่าอีก และถ้าใช่ทำไม

คุณสมบัติแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต

• ง่ายต่อการใช้
• เหมาะสำหรับสถานการณ์ง่าย ๆ และล้มเหลวสำหรับสถานการณ์ที่ซับซ้อน
• คล้ายกับ AngularJS
• การผูกข้อมูลแบบสองทาง (โดยใช้ [(NgModel)]ไวยากรณ์)
• รหัสส่วนประกอบน้อยที่สุด
• ติดตามแบบฟอร์มโดยอัตโนมัติและข้อมูล (จัดการโดย Angular)
• การทดสอบหน่วยเป็นความท้าทายอีกประการหนึ่ง

คุณสมบัติแบบฟอร์มปฏิกิริยา

• มีความยืดหยุ่นมากขึ้น แต่ต้องการการฝึกฝนมากมาย
• จัดการกับสถานการณ์ที่ซับซ้อนใด ๆ
• ไม่มีการผูกข้อมูล (ตัวแบบข้อมูลที่ไม่เปลี่ยนรูปแบบซึ่งเป็นที่ต้องการโดยนักพัฒนาส่วนใหญ่)
• โค้ดส่วนประกอบเพิ่มเติมและมาร์กอัพ HTML น้อยลง
• การแปลงปฏิกิริยาสามารถทำได้เช่น
  • การจัดการเหตุการณ์ตามเวลา debounce
  • การจัดการเหตุการณ์เมื่อส่วนประกอบแตกต่างกันจนกว่าจะมีการเปลี่ยนแปลง
  • การเพิ่มองค์ประกอบแบบไดนามิก
• ทดสอบหน่วยง่ายขึ้น

ผมคิดว่าการอภิปราย it'sa เกี่ยวกับรหัส , กลยุทธ์และประสบการณ์ของผู้ใช้

โดยสรุปเราเปลี่ยนวิธีการที่ใช้เทมเพลตซึ่งง่ายต่อการใช้งานมากขึ้นเพื่อทำปฏิกิริยา (ในรูปแบบที่ขับเคลื่อนด้วยโมเดล) เพื่อให้เราควบคุมได้มากขึ้นซึ่งส่งผลให้ฟอร์มทดสอบได้ดีขึ้นโดยใช้ประโยชน์ decoupling ระหว่าง HTML (การออกแบบ / ทีม CSS สามารถทำงานได้ที่นี่) และกฎเกณฑ์ทางธุรกิจของส่วนประกอบ (สมาชิกผู้เชี่ยวชาญเชิงมุม / js) และเพื่อปรับปรุงประสบการณ์การใช้งานของผู้ใช้ด้วยคุณสมบัติต่างๆเช่นการแปลงปฏิกิริยาการตรวจสอบความสัมพันธ์และจัดการสถานการณ์ที่ซับซ้อนเช่นกฎการตรวจสอบความถูกต้อง

บทความนี้เป็นข้อมูลอ้างอิงที่ดีเกี่ยวกับเรื่องนี้: แบบฟอร์ม Angular 2 - วิธีการขับเคลื่อนเทมเพลตและแบบจำลองการขับเคลื่อน

นี่คือบทสรุปของการเปรียบเทียบระหว่างแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลตและแบบตอบสนองที่อธิบายโดย DeborahK (Deborah Kurata) อย่างดี

รูปแบบปฏิกิริยา:

• นำมาใช้ใหม่
• แข็งแกร่งยิ่งขึ้น
• ทดสอบ,
• ปรับขนาดได้มากขึ้น

แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต:

• ง่ายต่อการเพิ่ม
• ปรับขนาดได้น้อย
• ข้อกำหนดในรูปแบบพื้นฐาน

ในบทสรุปถ้ารูปแบบที่มีความสำคัญมากสำหรับแอปหรือรูปแบบปฏิกิริยาที่ใช้ในแอปของคุณคุณควรใช้รูปแบบปฏิกิริยา .Otherwise แอปของคุณมีความต้องการขั้นพื้นฐานและง่ายสำหรับรูปแบบเช่นการลงชื่อเข้าใช้คุณควรใช้รูปแบบแม่แบบขับเคลื่อน

มีลิงค์ทางการเชิงมุม

วิธีที่ง่ายที่สุดในการทราบความแตกต่างระหว่างแบบฟอร์มปฏิกิริยาและแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต

ฉันสามารถพูดได้ว่าถ้าคุณต้องการการควบคุมที่มากขึ้นและความสามารถในการปรับขยายได้ไปกับรูปแบบการตอบโต้

แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต:

นำเข้าโดยใช้ FormsModule

แบบฟอร์มที่สร้างขึ้นด้วยคำสั่ง ngModel สามารถทดสอบได้เฉพาะในแบบ end-to-end เนื่องจากต้องมี DOM

ค่าของแบบฟอร์มจะมีให้ในสองที่แตกต่างกัน: โมเดลการดูคือ ngModel

การตรวจสอบความถูกต้องของฟอร์มเมื่อเราเพิ่มแท็กตัวตรวจสอบความถูกต้องให้กับเขตข้อมูลมากขึ้นหรือเมื่อเราเริ่มเพิ่มการตรวจสอบความถูกต้องข้ามเขตข้อมูลความสามารถในการอ่านของแบบฟอร์มจะลดลง

แบบฟอร์มปฏิกิริยา:

โดยทั่วไปสามารถใช้สำหรับการใช้งานขนาดใหญ่

ตรรกะการตรวจสอบที่ซับซ้อนเป็นจริงง่ายกว่าที่จะใช้

นำเข้าโดยใช้ ReactiveFormsModule

ค่าของแบบฟอร์มจะมีอยู่ในสองที่แตกต่างกัน: แบบจำลองมุมมองและ FormGroup

ทดสอบหน่วยง่ายต่อการ: เราสามารถทำได้โดยเพียงแค่การยกระดับชั้นเรียนการตั้งค่าบางอย่างในการควบคุมรูปแบบและดำเนินการยืนยันกับรัฐที่ถูกต้องของรูปแบบทั่วโลกและสถานะความถูกต้องของการควบคุมแต่ละ

การใช้ Observables สำหรับการเขียนโปรแกรมแบบโต้ตอบ

ตัวอย่างเช่น:ฟิลด์รหัสผ่านและฟิลด์ยืนยันรหัสผ่านจะต้องเหมือนกัน

วิธีการเกิดปฏิกิริยา: เราเพียงแค่ต้องเขียนฟังก์ชั่นและเสียบเข้ากับ FormControl

เทมเพลตที่ขับเคลื่อนด้วยวิธี: เราจำเป็นต้องกำหนดคำสั่งและส่งค่าของสองฟิลด์

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