首先, Angular 提供了 2 种表单处理方式
一模版式表单
二响应式表单
两种表单处理方式的不同点在于:
模版式表单: 其数据模型是通过组件模版中的相关指令来定义, 因为受限于 html 的语法, 所以只适用于简单的表单场景
响应式表单: 使用 TypeScript 创建底层模型, 运用特定的指令将模版和底层 ts 数据模型绑定
在此, 我们先学习模版式表单
模版式表单指令
指令 | 隐式创建实例 |
---|---|
ngForm | FormGroup |
ngModel | FormControl |
ngModelGroup | FormGroup |
先丢出一个 demo
- html
- <form #localform="ngForm" (ngSubmit)="onSubmit(localform.value)" >
<p > 用户名:<input #localModel="ngModel" ngModel name="nickname" type="text"></p>
- <p > 手机号:<input ngModel name="mobilephone" type="text"></p>
- <p ngModelGroup="passwordsGroup" >
- <p > 密码:<input ngModel name="password" type="text"></p>
- <p > 确认密码:<input ngModel name="passwordConfirm" type="text"></p>
- </p>
- <button type="submit"> 注册 </button>
- </form>
- <p>{{localform.value | json}}</p>
- <p>{{localModel.value | json}}</p>
- ts
- onSubmit(info){
- console.log(info);
- }
运行图
ngForm
在这个标签作用域下, 标记 HTML 元素应该成为表单数据的一部分 因为 Angular 是单页应用, 所以会拦截表单提交可使用事件 (ngSubmit)="xxx" Angular 会在 form 标签上自动添加 ngForm 指令, 可使用 ngNoForm 使 Angular 不接管 ngForm 也可以用在 p 标签上 ngForm 会自动标记 ngModel 元素 在 form 标签上引用本地变量 #localform,#localform = "ngForm", 相当于 FormGroup 的实例化对象赋值给 localform, 所以, 可以使用 localform.value 可以取得表单中定义 ngModel 的 name 的值
ngModel
定义 ngModel 必须定义 name 的值
ngFormGroup
ngFormGroup 是 ngForm 的自对象, 其值是对象 <
来源: https://www.2cto.com/kf/201802/722021.html