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属性保存着表单里面所有字段的值。

  
用户名:
  
密码：
  
确认密码:
  
电话：
  


{{myForm.value | json}}

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

image.png

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

表单.ts

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

模板

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

image.png

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

  
用户名:
{{username.value}}
 

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

  
用户名:
  
密码：
  

效果：

image.png

然后先按照我们原始的方式写出表单
 代码如下:

   
用户名:
   
密码：
   
确认密码:
   
电话：
   

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

  
用户名:
  
电话：
  

     
密码：
     
确认密码: