Angular 2 表单

本章我们开始学习如何用组件和模板构建一个 angular 表单

我们可以使用 Angular 模板创建各种类型表单，比如 登录表单，联系人表单，商品详情表单等，而且还可以为这些表单的字段添加数据校验

现在，我们就一步步来实现表单的功能

创建项目

现在，我们就一步步来实现表单的功能

导入初始化项目

修改 angular2-forms/package.json 文件中的 "name": "angular2-typescript-quickstart" 为 "name": "angular2-forms"

然后运行

安装依赖包

创建 Site 模型

在 angular2-forms/app 目录下新建文件 site.ts ，复制以下内容

上面的代码创建了一个简单的模型类 Site，包含了三个必需字段：id，name，url，一个可选字段：alexa

标为 public 的为公有字段，alexa 后添加一个问号 (?) 表示可选字段

创建一个表单组件

每个 Angular 表单分为两部分

1. 一个基于 html 的模板
2. 一个基于代码的组件，用来处理数据和用户交互

在 angular2-forms/app 目录下创建文件 site-form.component.ts ，复制以下内容

上面的代码首先导入了 Component 装饰器和 Site 模型

@Component 选择器 "site-form" 表示我们可以通过一个 <site-form> 标签，把此表单扔进父模板中

templateUrl 属性指向一个独立的 HTML 模板文件，名叫 site-form.component.html

diagnostic 属性用于返回这个模型的 JSON 形式

定义应用的根模块

修改 app.module.ts 来定义应用的根模块

模块中引用了外部及声明属于本模块中的组件，比如 SiteFormComponent

因为模板驱动的表单有它们自己的模块，所以我们得把 FormsModule 添加到本应用的 imports 数组中，这样我们才能使用表单

创建根组件

修改根组件文件 app.component.ts 将 SiteFormComponent 将被放在其中

创建一个初始 HTML 表单模板

新建文件 app/site-form.component.html ，复制以下内容

required 属性设置的该字段为必需字段，如果没有设置则是可选

安装 bootstrap

在 angular2-forms 目录下输入以下命令：

修改 index.html 为以下内容，添加以下样式表

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！