草庐IT

Angular 2 表单

runoob 2023-04-06 原文

Angular 2 表单

本章节我们将为大家介绍如何使用组件和模板构建一个 Angular 表单。

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

接下来我们一步步来实现表单的功能。

创建项目

导入初始化项目。

完整的项目创建可以参考：Angular 2 TypeScript 环境配置

或者直接下载源代码：点我下载

解压后，修改目录名为angular-forms，修改 angular-forms/package.json 文件中的 "name": "angular-quickstart" 为 "name": "angular-forms"。

完成后，我们执行 cnpm install 来载入依赖包。

创建 Site 模型

以下创建了一个简单的模型类 Site，包含了三个必需字段：id，name，url，一个可选字段：alexa。

在 angular-forms/app 目录下创建 site.ts 文件，代码如下：

app/site.ts 文件：

export class Site { constructor( public id: number, public name: string, public url: string, public alexa?: number ) { } }

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

创建一个表单组件

每个 Angular 表单分为两部分：一个基于 HTML 的模板，和一个基于代码的组件，它用来处理数据和用户交互。

在 angular-forms/app 目录下创建 site-form.component.ts 文件，代码如下：

app/site-form.component.ts 文件：

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.runoob.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, '菜鸟教程', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } // TODO: 完成后移除 get diagnostic() { return JSON.stringify(this.model); } }

实例中导入了 Component 装饰器和 Site 模型。

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

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

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

定义应用的根模块

修改 app.module.ts 来定义应用的根模块，模块中指定了引用到的外部及声明属于本模块中的组件，比如 SiteFormComponent。

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

app/app.module.ts 文件代码如下

app/app.module.ts 文件：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { SiteFormComponent } from './site-form.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, SiteFormComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

创建根组件

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

app/app.component.ts 文件：

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<site-form></site-form>' }) export class AppComponent { }

创建一个初始 HTML 表单模板

创建模板文件 site-form.component.html ，代码如下所示：

app/site-form.component.html 文件：

<div class="container"> <h1>网站表单</h1> <form> <div class="form-group"> <label for="name">网站名</label> <input type="text" class="form-control" id="name" required> </div> <div class="form-group"> <label for="alexa">alexa 排名</label> <input type="text" class="form-control" id="alexa"> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div>

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

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

cnpm install bootstrap --save

打开 index.html 文件，把以下样式链接添加到 <head> 中：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

执行 npm start 后，访问：http://localhost:3000/，输出效果如下：

使用 ngModel 进行双向数据绑定

接下来我们使用 ngModel 进行双向数据绑定，通过监听 DOM 事件，来实现更新组件的属性。

修改 app/site-form.component.html ,使用 ngModel 把我们的表单绑定到模型。代码如下所示：

app/site-form.component.html 文件：

<div class="container"> <h1>网站表单</h1> <form> {{diagnostic}} <div class="form-group"> <label for="name">网站名</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </div> <div class="form-group"> <label for="alexa">alexa 排名</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">网站 URL </label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div>

  • 每一个 input 元素都有一个 id 属性，它被 label 元素的 for 属性用来把标签匹配到对应的 input 。

  • 每一个 input 元素都有一个 name 属性， Angular 的表单模块需要使用它为表单注册控制器。

运行以上实例输出结果如下：

{{diagnostic}} 只是用于测试时候输出数据使用。

我们还可以通过 ngModel 跟踪修改状态与有效性验证，它使用了三个 CSS 类来更新控件，以便反映当前状态。

状态 为 true 时的类 为 false 时的类
控件已经被访问过 ng-touched ng-untouched
控件值已经变化 ng-dirty ng-pristine
控件值是有效的 ng-valid ng-invalid

这样我们就可以添加自定义 CSS 来反应表单的状态。

在 angular-forms 目录下创建 forms.css 文件，代码如下：

forms.css 文件：

.ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green */ } .ng-invalid:not(form) { border-left: 5px solid #a94442; /* red */ }

打开 index.html 文件，把以下样式链接添加到 <head> 中：

<link rel="stylesheet" href="forms.css">

修改 app/site-form.component.html ,代码如下所示：

app/site-form.component.html 文件：

<div class="container"> <h1>网站表单</h1> <form> {{diagnostic}} <div class="form-group"> <label for="name">网站名</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 网站名是必需的 </div> </div> <div class="form-group"> <label for="alexa">alexa 排名</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">网站 URL </label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div>

模板中通过把 div 元素的 hidden 属性绑定到 name 控件的属性，我们就可以控制"name"字段错误信息的可见性了。

删除掉 name 字段的数据，显示结果如下所示：

添加一个网站

接下来我们创建一个用于添加网站的表单，在 app/site-form.component.html 添加一个按钮：

app/site-form.component.html 文件：

<button type="button" class="btn btn-default" (click)="newSite()">添加网站</button>

将以上按钮事件绑定到组件方法上：

app/site-form.component.ts 文件：

active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); }

我们给组件添加一个 active 标记，把它初始化为 true 。当我们添加一个新的网站时，它把 active 标记设置为 false ， 然后通过一个快速的 setTimeout 函数迅速把它设置回 true 。

通过 ngSubmit 来提交表单

我们可以使用 Angular 的指令 NgSubmit 来提交表单， 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

<form *ngIf="active" (ngSubmit)="onSubmit()" #siteForm="ngForm">

我们定义了一个模板引用变量 #siteForm ，并且把它初始化为 "ngForm" 。

这个 siteForm 变量现在引用的是 NgForm 指令，它代表的是表单的整体。

site-form.component.ts 文件完整代码如下：

app/site-form.component.ts 文件：

import { Component } from '@angular/core'; import { Site } from './site'; @Component({ moduleId: module.id, selector: 'site-form', templateUrl: 'site-form.component.html' }) export class SiteFormComponent { urls = ['www.runoob.com', 'www.google.com', 'www.taobao.com', 'www.facebook.com']; model = new Site(1, '菜鸟教程', this.urls[0], 10000); submitted = false; onSubmit() { this.submitted = true; } // TODO: 完成后移除 get diagnostic() { return JSON.stringify(this.model); } active = true; newSite() { this.model = new Site(5, '', ''); this.active = false; setTimeout(() => this.active = true, 0); } }

app/site-form.component.html 完整代码如下：

app/site-form.component.html 文件：

<div class="container"> <div [hidden]="submitted"> <h1>网站表单</h1> <form *ngIf="active" (ngSubmit)="onSubmit()" #siteForm="ngForm"> {{diagnostic}} <div class="form-group"> <label for="name">网站名</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 网站名是必需的 </div> </div> <div class="form-group"> <label for="alexa">alexa 排名</label> <input type="text" class="form-control" id="alexa" [(ngModel)]="model.alexa" name="alexa"> </div> <div class="form-group"> <label for="url">网站 URL </label> <select class="form-control" id="url" required [(ngModel)]="model.url" name="url"> <option *ngFor="let p of urls" [value]="p">{{p}}</option> </select> </div> <button type="submit" class="btn btn-default" [disabled]="!siteForm.form.valid">提交</button> <button type="button" class="btn btn-default" (click)="newSite()">新增网站</button> </form> </div> <div [hidden]="!submitted"> <h2>你提交的信息如下:</h2> <div class="row"> <div class="col-xs-3">网站名</div> <div class="col-xs-9 pull-left">{{ model.name }}</div> </div> <div class="row"> <div class="col-xs-3">网站 alexa 排名</div> <div class="col-xs-9 pull-left">{{ model.alexa }}</div> </div> <div class="row"> <div class="col-xs-3">网站 URL </div> <div class="col-xs-9 pull-left">{{ model.url }}</div> </div> <br> <button class="btn btn-default" (click)="submitted=false">编辑</button> </div> </div>

模板中我们把 hidden 属性绑定到 SiteFormComponent.submitted 属性上。

主表单从一开始就是可见的，因为 submitted 属性是 false ，当我们提交了这个表单则隐藏，submitted 属性是 true：

submitted = false; onSubmit() { this.submitted = true; }

最终的目录结构为：

本文所使用的源码可以通过以下方式下载，不包含 node_modules 和 typings 目录。

源代码下载

完整实例演示 GIf 如下：

Angular表单spanclasshlAngularJS2

有关Angular 2 表单的更多相关文章

  1. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  2. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  3. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  4. ruby-on-rails - 用于 Rails 的 HAML 表单 - 2

    我目前正在尝试将ERB布局转换为HAML。这是我不断收到的错误:index.html.haml:18:syntaxerror,unexpected')'));}\n#{_hamlout.format_...这是HAML页面:.row-fluid.span6%h2TodoList.span6%h2{:style=>"text-align:right;"}document.write(today)%hr.divider.row-fluid.span6%h2.small_headNewTask=render:partial=>'layouts/form_errors',:locals=>{:

  5. ruby-on-rails - 如何在 Rails 中为现有模型生成表单？ - 2

    为现有模型生成单个文件(_form.html.erb)的命令是什么？在Rails3中工作。谢谢。 最佳答案 这听起来可能很傻，但请听我说完……当我想开始清洁时，我自己也做过几次这样的事情。以下是一个脚本，它将读取您的模式并生成必要的生成命令来重现它:require'rubygems'require'active_support/core_ext'schema=File.read('db/schema.rb')schema.scan(/create_table"(\w+)",.*?\n(.*?)\nend/m).eachdo|name

  6. ruby-on-rails - Ruby on Rails : if current page? 是主页，不显示表单 - 2

    我不想显示表单，但前提是当前页面不是主页这是我目前所拥有的...我有我的路线设置:root'projects#index'我的看法:'projects',:action=>'index'))%>showsomestuff如果url是localhost:3000/projects，则不会显示但是它显示了它的localhost:3000所以我需要以某种方式确保它不会显示主页。另外，我有主页的搜索参数，但我仍然不想显示它是否像localhost:3000/projects?search=blahblahblah 最佳答案 使用root_p

  7. ruby-on-rails - 在多个页面上使用相同表单的 Rails 最佳实践 - 2

    我正在开发一个Rails2.3.1网站。在整个网站中，我需要一个用于在各种页面(主页、创建帖子页面、帖子列表页面、评论列表页面等)上创建帖子的表单——只要说这个表单需要在由各种Controller)。这些页面中的每一个都显示在相应的Controller/操作中检索到的各种其他信息。例如，主页列出了最新的10篇文章、从数据库中提取的内容等。因此，我已将帖子创建表单移动到它自己的部分中，并将该部分包含在所有必要的页面中。请注意，部分POST中的表单到/questions(路由到PostsController::create——这是默认的Rails行为)。我遇到的问题是当Posts表单没有正

  8. ruby-on-rails - Postgres 范围字段 + Rails 表单 - 2

    是否有集成Postgresrangetypes的标准方法？使用Rails表单助手？我基本上需要一个最小和最大字段，它们在保存时转换为一个范围。有什么想法吗？ 最佳答案 起初我在想这样的事情:classModeldelegate:begin,:end,to::range,prefix:true,allow_nil:true#Replace:rangewithyourfieldnameend获取方法:range_begin,range_end。我检查了文档，这些方法是只读的。所以你还需要二传手:classModeldelegate:be

  9. ruby-on-rails - Rails 4 真实性 token - 在 header 和表单隐藏输入中？ - 2

    我正试图在Rails中获得完整的页面缓存，但我在CSRF方面遇到了很大的障碍——或者可能只是我对它的理解。我目前有form_authenticity_token存储在cookie中的字符串，JS可以使用该cookie访问和重写header标签。我在生成的HTML中有两个地方可以找到标记:1)在头部2)在表单的隐藏输入元素中如前所述，这些哈希值彼此不同(在未启用缓存的开发模式下)。他们为什么不同？为什么我可以删除headmeta标签并保留表单输入并且允许请求​​？然而，当我删除表单输入标签并保留标题时，请求被拒绝了吗？实际上这意味着head标签是无用的，不是吗？我可以将表单输入标签重写为

  10. ruby-on-rails - Rails with angular 与 Rails pure(查看性能) - 2

    我尝试在Internet上搜索有关使用angularJS进入RubyonRails项目与RubyonRailspure的View性能的信息。我的问题是因为2个月前我开始使用纯AngularJS，现在我需要将AngularJS集成到一个新项目中，但需要展示使用带有RubyonRails的AngularJS呈现View的性能如何，并消除对RubyonRails的负担.例如:带Rails的Angular:使用RubyonRails获取数据(从数据库或GET请求)，将信息发送到file.js.erb并使用AngularJS操作数据并显示带有解析数据的View。纯粹的Rails:(自然流程)使用

随机推荐