angular的表单简介以及模板式表单的应用实例

angular表单API
模板式表单：表单的数据模型是通过组件模板的相关指令来定义的，因为使用这种方式定义表单的数据模型时，我们会受限于html的语法，所以，模板驱动方式只适合用于一些简单的场景
响应式表单： 使用响应式表单时，你通过编辑写typeScript代码而不是html代码来创建一个底层的数据模型，在这个模型定义好以后，你使用一些特定的指令，将模板上的html元素与底层的数据模型连接在一起

注意事项
1.不管是哪种表单，都有一个对应的数据模型来存储表单的数据。在模板式表单中，数据模型是由angular基于你组件模板中的指令隐式创建的，而在响应式表单中，你通过编码明确的创建数据模型然后将模板上的html元素与底层的数据模型连接在一起。
2.数据模型并不是一个任意的对象，它是一个由angular/forms模块中的一些特定的类，如FormControl,FormGroup,FormArray等组成的，在模板式表单中，你是不能直接访问到这些类的
3.响应式表单并不会替你生成html，模板仍然需要你自己来编写
4.不管使用哪种表单都要在app.module.ts中的imports中引入模块，模板式表单需要引入FormsModule,响应式表单需要引入ReactiveFormsModule

模板式表单指令：NgModelGroup,NgForm,NgModel,而这些指令都来自FormsModule模块
NgForm隐式的创建一个FormGroup类的实例，这个类用来代表表单数据类型模型并且储存表单的数据，标有NgForm的html标签会自动发现其标有NgModel这个指令的子元素，并将它们的值添加到表单的数据模型中，如果不需要angular处理表单，需要写上NgNoForm

NgForm特性：
1.NgForm指令可以被模板本地变量引用，以便在模板中访问NgForm对象的实例
2.会拦截标准的html事件，阻止表单的自动提交，因为表单的提交会引起页面自动刷新，而单页应用，页面永远不需要刷新的，所有angular是阻止它自动提交，然后用一个自定义NgSubmit事件来代替它

NgModel
在angular表单API中NgModel指令代表一个字段，这个指令会隐式的创建一个FormControl的实例来代表字段的数据模型，并用FormControl这个对象来存储字段的值
注意;在标有NgForm的html元素内使用NgModel指令，不需要方括号或小括号扩起来，但是需要为添加了NgModel的元素添加一个name的属性，这个name属性的值，会成为NgForm属性所对应对象中的一个属性的

NgModelGroup代表的是表达的一部分，允许将表单字段阻止在一起，形成更清晰的层次关系于NgForm指令类似，也是生成一个FormGroup实例，这个实例会在NgForm的value中形成一个嵌套的对象，所以NgModel Group的子属性会变成嵌套关系的子属性

模板式表单实例

1、新建一demo项目，在项目下建立子项目form.在form.component.html内写入

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <div ngModelGroup="userInfo">
    <div>用户名:<input #username="ngModel" ngModel name="username"></div>
    <div>手机号:<input ngModel name="mobile" type="number"></div>
  </div>
  <div ngModelGroup="passwordGroup">
    <div>密码:<input type="password" ngModel name="password"></div>
    <div>确认密码:<input type="password" ngModel name="pconfirm"></div>
  </div>
  <button type="submit">注册</button>
</form>
<!--下面被注释了的这一段会帮助我们进一步里面位置关系-->
<!--<div>-->
  <!--{{myForm.value | json}}-->
<!--</div>-->
<!--<div>-->
  <!--{{username.value}}-->
<!--</div>-->

2、在form.component.ts内写入点击事件，在控制台输出

 onSubmit(value: any) {
     console.log(value);
  }

3.在app.component.html内写入子组件标签

<app-form><app-form>

在页面上输入数据，点击注册，查看控制台变化。