Angular学习：表单处理之模版式表单

首先，Angular提供了2种表单处理方式

一、模版式表单

二、响应式表单

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

模版式表单：其数据模型是通过组件模版中的相关指令来定义，因为受限于HTML的语法，所以只适用于简单的表单场景。

响应式表单：使用TypeScript创建底层模型，运用特定的指令将模版和底层ts数据模型绑定。

在此，我们先学习模版式表单。

模版式表单指令

先丢出一个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的自对象，其值是对象 <