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