Angular form學習筆記：Angular兩種實作form的方式

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完成。