2.模板式表单

image.png

使用模板式表单只能使用指令定义数据模型。NgForm、 NgModel 、NgModelGroup 这些指令来自于FormsModel模块。

一、NgForm：用来代表这个整个表单，在ng应用中自动的添加到每个form标签上，（在ng中的表单点击注册没有反应，不会在提交，是因为添加了ngForm，所以表单angular接管了。）隐式的创建一个FormGroup类的实例，代表表单数据模型并且存储表单的数据。标有form指令自动发现标有NgModel的子元素，添加到表单数据模型中。

注意（1）.ngForm可以在form标签外使用，下面两个图效果一样

image.png
image.png

一样。
（2）.angular不会接管这个表单。
（点击注册能提交，是一个标准的html行为，不是一个ng行为）

image.png

（3）特性：可以被模板本地变量引用，以便在模板中访问ngForm实例。（#开头的变量等于ngForm，拿到了ngForm创建的对象了）声明了myForm模板变量，通过它访问我们的ngForm对象的属性。value属性保存着表单里面所有字段的值。

<form #myForm="ngForm" action="/regist" method="post">
  <div>用户名:<input ngModel type="text" name="username"/></div>
  <div>密码：<input ngModel type="text" name="password"/></div>
  <div>确认密码:<input ngModel type="text" name="confirmpass"/></div>
  <div>电话：<input ngModel type="text" name="mobile"/></div>
  <div><input type="submit" value="提交"/></div>
</form>
<div>{{myForm.value | json}}</div>

效果：（数据未显示，是因为ngModel）

image.png

分析：ngForm会拦截标准的表单提交事件，点击按钮没有效果，阻止提交。表单提交会有刷新，所以用（ngSubmit）事件绑定来代替

表单.ts

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

模板

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">

二、NgModel：代表表单一个字段，隐式创建一个FormControl的 实例来代表数据字段模型，用FormControl模型存储字段的值，标记了ngForm指令元素内来使用ngModel，不需要用括号，但是添加了ngModel元素需要指定一个name属性，name属性的值会成为ngFrom对象的value属性所对应的效果.

image.png

分析：ngModel创建的对象能通过模板变量来引用，

  <div>用户名:<input #username="ngModel" ngModel  type="text" name="username"/></div>
<div>{{username.value}}</div> <!--通过这个获取用户名的值-->

NgModelGroup
代表是表单的一部分，也会创建一个FormGroup的实例，会在ngForm的对象value属性中表现为一个嵌套的对象。

<div ngModelGroup="userInfo">
  <div>用户名:<input #username="ngModel" ngModel  type="text" name="username"/></div>
  <div>密码：<input ngModel type="text" name="password"/></div>
  </div>

效果： image.png

然后先按照我们原始的方式写出表单
 代码如下:
<form action="">
   <div>用户名:<input type="text" name="username"/></div>
   <div>密码：<input type="text" name="password"/></div>
   <div>确认密码:<input type="text" name="confirmpass"/></div>
   <div>电话：<input type="text" name="mobile"/></div>
   <div><input type="submit" value="提交"/></div>
</form>

angular中定义了一些指令使用在表单上，要想在后台中获取表单字段，我们必须用特定的指令去标明，如下面是使用ng template-form之后的表单.

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
  <div>用户名:<input  ngModel  type="text" name="username"/></div>
  <div>电话：<input ngModel type="text" name="mobile"/></div>
  <div ngModelGroup="passwordGroup">
     <div>密码：<input ngModel type="text" name="password"/></div>
     <div>确认密码:<input ngModel type="text" name="confirmpass"/></div>
  </div>
  <div><input type="submit" value="提交"/></div>
</form>
<!--
<div>{{myForm.value | json}}</div> &lt;!&ndash;获取整个表单的数据&ndash;&gt;
<div>{{username.value}}</div> &lt;!&ndash;通过这个获取用户名的值&ndash;&gt;
-->