Angular学习笔记（二十）表单处理之模版式表单

首先，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的子对象，其值是对象