("▔□▔)，又遇到了错误，似曾相识。分析错误原因，上网搜索，解决错误。不知道做了多少次这个动作，在Angular Form这个知识点上。so，为了不重复干活，就用了两天的时间整理了我对Angular Form表单的理解。
先简单的来说下Angular Form表单，Form，是商业应用的支柱，一般，我们用它来登录、预定机票、安排会议等等一些数据录入任务。在Angular中构建表单的技术有两种：响应式表单和模板驱动表单。它们都属于@angular/forms库，并且共享一组公共的表单控件类。但是在设计哲学、编程风格和具体技术有显著区别，所以他们有自己的模块：ReactiveFormsModule和FormsModule。
-
响应式表单
是一种响应式编程风格，倾向于在非UI的数据模型（通常接收服务器）之间显式的管理数据流，并且用一个UI导向的表单模型来保存屏幕上HTML控件的状态和值。 -
模板驱动表单
使用Angular模板语法和表单里的指令编写的表单就是模板驱动表单。在模板驱动表单中，Angular会自动在form标签中附加一个NgForm指令，它会为form标签增加额外的特性，它会控制那些带NgModel指令和name属性的元素，它有自己的valid属性，只有在表单中每个控件都有效时才为真。
其次，在看完了Angular Form官方文档后,我整理出Angular Form的关键词：
- FormBuilder
- FormGroup
- FormControl class
- FormArray
- AbstractControl
- FormControlName
- FormControl Directive
接下来就一一详细介绍它们。
FormBuilder
FormBuilder，根据程序员的配置，创建一个AbstractControl表单。在组件中使用FormBuilder时，必须在模块中倒入ReactiveFormsModule。
FormGroup、FormControl class、FormArray
FormGroup、FormControl class、FormArray他们是Angular定义窗体的三个基本构建块。
-
FormGroup，跟踪一组FormControl实例的值和有效性状态，FormGroup将每个子FormControl的值聚合到一个对象中，每个控件名称作为关键字，通过检查子FormControl的状态计算其状态。若其中的某个控件无效，则整个表单无效。
const form = new FormGroup({
password: new FormControl('', Validators.minLength(2)),
passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);
function passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('passwordConfirm').value
? null : {'mismatch': true};
}
new FormGroup中参数：第一个参数是子控件（FormControl）的集合，每个子控件的key是其注册的名称；第二个参数是组级间的验证程序，例如，密码控件和验证密码控件验证相等时的程序就放在第二个参数上。
-
FormControlclass，跟踪单个表单控件的值和有效性状态。
const name = new FormControl('', Validators.required);
new FormControl中参数：第一个参数是初始化的值；第二个参数是验证的方法，当让也可以写多个验证方法，暂不讨论。
-
FormArray， 跟踪FormControl、FormGroup、FormArray实例数组的值和有效性状态。
AbstractControl
AbstractControl是FormGroup、FormControl、FormArray的基类，它定义了所有子类之间共享的属性，如value、dirty和valid，它不应该直接被实例化。
FormControlName Directive、FormControl Directive
- 相同点：都是将
FormControl实例绑定到表单控件元素。这两个指令确保以程序写入的方式将FormControl的值写入到DOM元素中去（模型->视图，Model->View）,其二也确保用户输入到DOM的值反应到FormControl的实例中。（视图->模型，View->Model）。 - 不同点：FormControlName一般和FormGroup嵌套使用。
different.png
FormContorName绑定的是单个表单控件中key，而FormControl绑定的是FormControl实例。
以上就是我对Angular Form知识点的一些笔记，请大家多多指教。。。
网友评论