class="markdown_views prism-github-gist">

Angular提供了两种表单处理方式

1. 模板式表单
2. 响应式表单

两种表单处理方式的不同点：

模板式表单：其数据模型是通过组件模板中的相关指令来定义的。因为受限于HTML的语法，只适用于简单的表单场景。
响应式表单:使用ts创建底层模型，运用特定的指令将模板和底层ts数据模型绑定。

模板式表单指令

指令 隐式创建实例 ngForm FromGroup ngModel FormControl ngModelGroup FormGroup ngForm
在这个标签作用域下，标记HTML元素应该成为表单数据 的一部分
因为Angular是单页应用，所以会拦截表单提交，可使用事件(ngSubmit)=‘XXX’
Angular会在form标签上自动添加ngFrom 指令，可使用ngNoForm使Angular不接管
ngForm也可以用在div标签上
ngForm会自动标记ngModel元素
在form标签上引用本地变量#localform，#localform = ''ngForm,相当于FormGroup的实例化
对象赋值给了localform,所以，可以使用localform.value可以取得表单中定义ngModel的name的值 ngModel
定义ngModel必须定义name的值 ngFormGroup
ngFormGroup是ngForm的子对象，其值是对象

模板式表单的小栗子

HTML

用户名：

手机号：

密码：

确认密码：

注册

{{localform.value | json}}

{{localModel.value | json}}

TS onSubmit(info){ console.log(info); }