https://angular.io/guide/forms-overview

Angular提供了兩種通過form來處理用戶輸入的方式：

• reactive form
• template-driven form

Angular provides two different approaches to handling user input through forms: reactive and template-driven. Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

兩種方式各有優缺點。

Reactive forms provide direct, explicit access to the underlying forms object model.

Reactive forms提供了直接顯式訪問底層form對象模型的可能性。

Compared to template-driven forms, they are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, or you’re already using reactive patterns for building your application, use reactive forms.

同模板驅動的form方式比較，響應式form更加健壯，重用性和可測試性更佳。如果form已經是已開發出的應用的核心部分了，或者當前已經開發的應用已經使用了響應式編程范式，則推薦使用reactive forms.

Template-driven forms rely on directives in the template to create and manipulate the underlying object model.

Template driven forms依賴模板里的指令，來創建和控制底層的對象模型。

They are useful for adding a simple form to an app, such as an email list signup form.

用于為應用添加簡單的form支持，比如郵件注冊表單。

They’re easy to add to an app, but they don’t scale as well as reactive forms.

template-driven form很容易被添加到應用里，但是可擴展性不如reactive forms.

If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

如果應用僅僅有非常簡單的form需求，可以僅僅通過模板就能夠handle，則使用template-driven的form就足矣。

兩種方式的實現差異

scalability：跨組件間的Component共享。

Reactive forms require less setup for testing, and testing does not require deep understanding of change detection to properly test form updates and validation.

Reactive forms在測試環境的setup和對Angular change detection的理解透徹程度這一塊，都要優于template driven form.

Template-driven forms focus on simple scenarios and are not as reusable. They abstract away the underlying form API, and provide only asynchronous access to the form data model.

Template driven form只能處理簡單的form需求，并且沒法重用。Template driven form是底層form API的抽象，只提供了針對form數據模型的異步訪問方式。

FormControl tracks the value and validation status of an individual form control.

• FormControl 跟蹤單個form控件的值和validation狀態。

• FormGroup: 跟蹤一組form控件的值和validation狀態。

• ControlValueAccessor creates a bridge between Angular FormControl instances and native DOM elements.

FormControl實例和native DOM之間溝通的橋梁。

With reactive forms, you define the form model directly in the component class. The [formControl] directive links the explicitly created FormControl instance to a specific form element in the view, using an internal value accessor.

Reactive forms里，在Component class里直接定義form model.

The [formControl] directive links the explicitly created FormControl instance to a specific form element in the view, using an internal value accessor.

formControl的directive，formControl，將其他地方顯式創建的form control實例，關聯到視圖里某個特定的form element(注意，不是指form)上去。指令formControl的這種關聯，通過一個內部的value accessor完成。

總結

以上是生活随笔為你收集整理的Angular form 官网文档的学习笔记：Angular两种实现form的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。