看这篇文章之前，你需要掌握的知识:
form 可以说是 web 开发中的大的难题之一。跟普通的组件相比，form 具有以下几个特点:
1、更多的用户交互。
这意味着可能需要大量的自定义组件，比如 DataPicker，Upload，AutoComplete 等等。
3、频繁的状态改变。
每当用户输入一个值，都可能会对应用状态造成改变，从而需要更新表单元素或者显示错误信息。
3、表单校验，也就是对用户输入数据的有效性进行验证。
表单验证的形式也很多，比如边输入边验证，失去焦点后验证，或者在提交表单之前验证等等。
4、异步网络通信。
当用户输入和异步网络通信同时存在时，需要考虑的东西就更多了。就比如 AutoComplete，需要根据用户的输入去异步获取相应的数据，如果用户每输入一次就发起一次请求，会对资源造成很大浪费。因为每一次输入都是异步获取数据的，那么连续两次用户输入拿到的数据也有可能存在 "后发先至" 的问题。
正因为以上这些特点，使 form 的开发变得困难重重。在接下来的章节中，我们会将 RxJS 和 Form 结合起来，帮助我们更好的去解决这些问题。
HTML Form在实现我们自己的 Form 组件之前，让我们先来参考一下原生的 HTML Form。
保存表单状态
对于一个 Form 组件来说，需要保存所有表单元素的信息(如 value, validity 等)，HTML Form 也不例外。
那么，HTML Form 将表单状态保存在什么地方？如何才能获取表单元素信息？
主要有以下几种方法:
document.forms[0].elements[0].value; // 获取第一个 form 中第一个表单元素的值
const form = document.querySelector("form");
form.elements[0].value;
form.addEventListener('submit', function(event) {
console.log(event.target.elements[0].value);
});