Angular2如何实现模板驱动的表单

这篇文章给大家分享的是有关Angular2如何实现模板驱动的表单的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司服务项目包括果洛州网站建设、果洛州网站制作、果洛州网页制作以及果洛州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，果洛州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到果洛州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

在网页开发中，表单估计是最常用的一个，同时也是最麻烦、最容易出问题的。在一个稍微复杂一点的应用中，我们除了用表单元素收集数据，还需要验证，几个数据之间可能还会相互关联，然后根据不同的数据值调用不同的业务逻辑等。

使用Angular提供的数据绑定的功能，我们可以很容易就在组件中获得用户输入的数据，Angular也提供了几种验证方式方便我们进行数据的校验。但是，一些自定义的数据验证、数据交互和业务逻辑还是需要自己处理。

在Angular2中，提供了2种表单实现方式，分别是'template-driven'（模板驱动的表单）和'model-driven'（模型驱动表单）。在这篇文章中，我们先来看看模板驱动的表单。顾名思义，模板驱动的表单就是大部分表单相关代码都在模板里，通过在模板里面添加ngForm, ngModel和ngModelGroup等属性来定义模板和验证信息，以及它跟组件之间的数据交互。

实例

下图是这篇文章使用的实例的界面：

Angular2如何实现模板驱动的表单

它是一个用户信息输入的表单，包括4个字段，用户名、电话、城市和街道，演示了如何使用表单，给各个字段添加验证并显示验证结果，以及如何在组件中判断是否出错并获取出错信息。

项目源码可以从github获取，这个项目包含了几个Angular2表单相关的实例，可以使用下面的命令获取本文所对应的代码：

git clone https://github.com/Mavlarn/angular2-forms-tutorial

然后进入项目目录，运行下面的命令安装依赖然后运行测试服务器：

cd angular2-forms-tutorial
git checkout template-driven # 检出该文所使用的tag
npm install
npm start

该项目是基于之前的Angular2-basic模板，这个教程相关的代码都在'template-forms'目录里面。

引入FormsModule

首先，我们需要在app.module.ts里引入FormsModule。

import { FormsModule } from '@angular/forms';
//省略其他
@NgModule({
 imports: [ BrowserModule, FormsModule ],
 //省略其他
})

初始表单

然后，我们从一个基本的html表单开始：


 姓名:
 
 电话:
 
 城市:
 
 街道:
 
 保存

在实际的实例中，使用了bootstrap的表单样式，一组输入框应该是下面这个样子，但是在本文中，为了节省页面显示的篇幅，我省略了div, form-group等，我们只需要关心如何在Angular2中使用模板驱动的表单。如果想查看完整的带样式的代码，请查看源文件。


  姓名:

在上面的表单里，我们没有使用Angular2的任何功能，如数据绑定，也没有使用其他指令。但是，Angular2在

这样，当用户点击保存按钮的时候，Angular2会使用自己的验证机制，验证所有的数据，然后在调用'logForm(userForm)'方法。

在这个方法里，我们使用theForm.invalid就可以获得这个表单是否验证成功的状态，也可以用'theForm.value'获得所有的表单数据。在这里，我们把表单数据打印到控制台来检查数据。至于如何从这个表单引用中获取控件数据和状态，会在接下来再讲。

接下来，我们需要绑定数据。假设我们的业务是打开这个页面的时候获取用户数据，然后显示到页面表单上。我们在组件的构造方法中创建一个模拟的用户数据：

export class TemplateFormsComponent { user: any; constructor() { this.user = { name: '张三', mobile: 13800138001, city: '北京', street: '朝阳望京...' }; } }

在这里，我们使用[(ngModel)]="user.name"，这是双向绑定的方式，这样，当我们修改页面上的数据的时候，在组件中也能获得更新后的数据；同时，如果在组件中更新了数据，在页面上也能更新。

为了演示这个双向绑定跟单向绑定的区别，我们只对姓名使用双向绑定，对其他的都是用单向绑定，也就是[ngModel]="user.mobile"。使用[]的单向绑定是从模板到组件的绑定，也就是页面中的输入的数据改变，组件中的数据也会改变。但是组件中的数据更新不会引起页面上该数据的更新。

使用单向绑定可以减少数据的更新检查，从来可以提高性能。

这样，我们在组件中创建的用户数据就无法显示到页面上，但是，他还是能够将页面上输入的数据绑定到组件中的数据上。

在Angular2中，使用ngModel结合name属性来创建一个表单控件FormControls。例如上面的就对应一个userForm里面的控件city。由于我们在提交方法里面将这个userForm作为参数传到方法里，我们可以在方法里面获得所有的表单控件theForm.controls，它是一个Map类型的对象，key是所有的表单元素的name，值就是一个FormControl对象，里面保存着数据、和验证结果、是否修改等状态。也正是因为这些FormControls，我们才能够使用theForm.value的方式获取表单里的数据。当我们点击保存按钮的时候，就能在日志里面看到表单的数据：

一般情况下，我们的model数据有可能是嵌套的，比如对于用户信息来说，城市和街道可能在一个地址对象address里，例如：

对于这样的数据，我们就可以使用ngModelGroup来分组。模板就是这样：

这样我们就把地址信息都封装到一个address对象里面。注意我们绑定的数据的结构也发生改变，这样，我们也需要修改我们的组件里面的用户数据：

export class TemplateFormsComponent { user: any; constructor() { this.user = { name: '张三', mobile: 13800138001, address: { city: '北京', street: '朝阳望京...' } }; } }

至此，我们的表单的基本功能就算完成了。我们在面板中创建了表单，在组件中初始化了用户数据，并显示到页面上，在页面上用ngModel，将页面上的数据更改绑定到组件上。同时，使用name属性，使得表单里面的所有数据都成为FormControl对象。在提交所调用的方法里，获得了表单的验证状态和数据。

下一步，我们来添加数据验证，Angular2为我们提供了几种最基本的验证：

在使用Angular的验证之前，我们首先需要关闭浏览器默认的验证，不然，如果某一个输入不合法，提交按钮就无法提交。我们在form里添加novalidate：

然后，我们对姓名输入框添加验证，并根据验证的结果显示不同的提示，同时，为了演示Angular2表单控件的特性，再添加几个提示，来显示该值的状态，代码如下：

logForm(theForm: NgForm) { if (theForm.invalid) { if (theForm.controls['name'].errors) { this.nameErrorMsg = 'name error:' + JSON.stringify(theForm.controls['name'].errors); } else { this.nameErrorMsg = null; } } console.log(theForm.value); }

大橙子网站建设，新征程启航

Angular2如何实现模板驱动的表单

其他资讯