首先，Angular提供了2种表单处理方式 一、模版式表单
二、响应式表单

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

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

模版式表单指令

指令 隐式创建实例 ngForm FormGroup ngModel FormControl ngModelGroup FormGroup

先丢出一个demo

html <form #localform="ngForm" (ngSubmit)="onSubmit(localform.value)" > <div>用户名：<input #localModel="ngModel" ngModel name="nickname" type="text">div> <div>手机号：<input ngModel name="mobilephone" type="text">div> <div ngModelGroup="passwordsGroup" > <div>密码：<input ngModel name="password" type="text">div> <div>确认密码：<input ngModel name="passwordConfirm" type="text">div> div> <button type="submit">注册button> form> <div>{{localform.value | json}}div> <div>{{localModel.value | json}}div> ts onSubmit(info){ console.log(info); } 运行图

ngForm

• 在这个标签作用域下，标记HTML元素应该成为表单数据的一部分。
• 因为Angular是单页应用，所以会拦截表单提交。可使用事件(ngSubmit)="xxx"
• Angular会在form标签上自动添加ngForm指令，可使用ngNoForm使Angular不接管
• ngForm也可以用在div标签上
• ngForm会自动标记ngModel元素
• 在form标签上引用本地变量#localform，#localform = "ngForm"，相当于FormGroup的实例化对象赋值给localform，所以，可以使用localform.value可以取得表单中定义ngModel的name的值。

ngModel

• 定义ngModel必须定义name的值

ngFormGroup

• ngFormGroup是ngForm的子对象，其值是对象