Angular | 使用事件和表单

0.表单相应模块的引入

import { FormsModule } @angular/forms 

1.事件绑定

​ 以html的常用事件名如：mouseover,click包含在（）中的形式定为事件绑定，（keyup.enter）是可过滤的按键事件

​ 模板变量：例如$event，事件中使用的值，可以再html代码中直接使用

​ 模板引用变量：例如定一个input为#product,那么product.name就是模板引用变量

2.双向数据绑定

​ 以[()]包含的ngModel可实现双向数据绑定，即页面上变量发生变化时，数据模型也发生变化，同时绑定数据模型的其他位置页面也发生变化。其中设计变更检测。

3.基于模型的表单

​ 安全导航：即无法确定对象下是否有该key,则在页面引用时用可选链惊醒规避

<li *ngIf = "product.error?.name" />

基于模型的表单

1.创建表单模型类，即

import {FormsControl, FormsGroup, validitors } from @angular/forms

​ 导入并创建FormsControl, FormsGroup的子类

​ 通过[formGrop] 来绑定 formgroup 对象

​ 根据生成表单元素

4.自定义表单验证器

​ 自定义的表单验证器就是一个验证器类的静态方法，接受限制条件参数，返回一个验证函数（形参为formControl）