angular2应用表单

表单创建一个有机、有效、引人注目的数据输入体验。 Angular 表单协调一组数据绑定控件,跟踪变更,验证输入的有效性,并且显示错误信息。
从零构建一个简单的表单:会学到

  • 1.使用组件和模板构建一个 Angular 表单
  • 2.使用 [(ngModel)] 语法实现双向数据绑定,以便于读取和写入输入控件的值
  • 3.结合表单来使用 ngModel ,能让我们跟踪状态的变化并对表单控件做验证
  • 4.使用特殊的 CSS 类来跟踪控件状态,并提供强烈的视觉反馈
  • 5.向用户显示有效性验证的错误提示,以及禁用 / 启用表单控件
  • 6.通过模板引用变量,在控件之间共享信息

模板驱动的表单

在模板中按照 Angular 模板语法 来构建表单。Angular 也支持的另一种方式叫做模型驱动表单 Model-Driven Forms
创建表单步骤:

  • 创建 Hero 模型类
  • Create the Hero model class
  • 创建控制此表单的组件
  • 创建具有初始表单布局的模板
  • 使用 ngModel 双向数据绑定语法把数据属性绑定到每个表单输入控件
  • 往每个表单输入控件上添加 name 属性 (Attribute)
  • 添加自定义 CSS 来提供视觉反馈
  • 显示和隐藏有效性验证的错误信息
  • 使用 ngSubmit 处理表单提交
  • 禁用此表单的提交按钮,直到表单变为有效

(1)创建一个 Hero 模型类

像以前的那样创建一个类;
创建一个hero.ts文件并添加类和类的属性;
<pre>
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
) { }
}</pre>
TypeScript 编译器为构造函数中每个标为 public 的参数创建一个公有字段,并在创建新的英雄实例时,把参数值自动赋给这些公有字段。
alterEgo 是可选的,构造函数允许我们省略它,注意 alterEgo? 中的问号 (?) 。

(2)创建一个表单组件

每个 Angular 表单分为两部分:一个基于 HTML 的模板,和一个基于代码的组件,它用来处理数据和用户交互。
创建一个名叫 hero-form.component.ts 的文件,并且放进下列定义:
<pre>import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
moduleId: module.id,
selector: 'hero-form',
templateUrl: 'hero-form.component.html'
})
export class HeroFormComponent {
powers = ['Really Smart', 'Super Flexible',
'Super Hot', 'Weather Changer'];
model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
submitted = false;
onSubmit() { this.submitted = true; }
// TODO: Remove this when we're done
get diagnostic() { return JSON.stringify(this.model); }
}
</pre>
修改 app.module.ts
<pre>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
HeroFormComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }</pre>
特殊处:如果一个组件、指令或管道出现在模块的 imports 数组中,就说明它是外来模块, 不要 再到 declarations 数组中声明它们。 如果你自己写的它,并且它属于当前模块, 就要 把它声明在 declarations 数组中。
修改原来的app.component.ts
<pre>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<hero-form></hero-form>'
})
export class AppComponent { }</pre>意义在于把上边的模板嵌套到my-app标签中

(3)创建一个初始 hero-form.component.html表单模板

  <div class="container">
    <h1>Hero Form</h1>
    <form>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" class="form-control" id="name" required>
    </div>
    <div class="form-group">
      <label for="alterEgo">Alter Ego</label>
      <input type="text" class="form-control" id="alterEgo">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

container、 form-group 、 form-control 和 btn 类来自 Twitter Bootstrap 。纯粹是装饰。 我们使用 Bootstrap 来打扮我们的表单。
表单不需要任何样式库,添加样式纯粹来装饰表单的。
我们来添加样式表。
在应用的根目录下打开一个终端窗口,敲如下命令:
npm install bootstrap --save
打开 index.html 文件并且把下列链接添加到 <head> 中。
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

ngFor 添加超能力

在**app/hero-form.component.html **中 Alter Ego 的紧下方添加如下 HTML :
<pre><div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>
我们为列表中的每一项超能力渲染出一个 <option> 标签。 模板输入变量 p 在每个迭代中都代表一个不同的超能力,我们使用双花括号插值表达式语法来显示它的名称。

使用 ngModel 进行双向数据绑定

[(ngModel)] 语法,它使用一种超简单的方式把我们的表单绑定到模型

表明数据从输入框流动到模型,再反向流动回来的过程。 这就是双向数据绑定!
让我们用类似的方式把 [(ngModel)] 绑定添加到 第二人格 和 超能力 属性。 我们将抛弃输入框的绑定消息,并在组件顶部添加一个到 diagnostic 的新绑定。 这样我们能确认双向数据绑定 在整个 Hero 模型上 都能正常工作了

修改app/hero-form.component.html
<pre>{{diagnostic}}
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name">
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo"
[(ngModel)]="model.alterEgo" name="alterEgo">
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power"
required
[(ngModel)]="model.power" name="power">
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>

(4)通过 ngModel 跟踪修改状态与有效性验证

表单不仅是关于数据绑定的。我们还希望知道表单中各个控件的状态,NgModel 指令不仅仅跟踪状态。它还使用三个 CSS 类来更新控件,以便反映当前状态。 我们可以通过定制这些 CSS 类的样式来更改控件的外观,以及让消息被显示或隐藏。我们往姓名 <input> 标签上添加一个名叫 spy 的临时 模板引用变量 ,然后用这个 spy 来显示它上面的所有 css 类。
<pre><input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"

spy >


TODO: remove this: {{spy.className}}</pre>
现在,运行本应用,并让 *姓名 *输入框获得焦点。 然后严格按照下面四个步骤来做:

  • 1.查看输入框,但别碰它
  • 2.点击输入框,然后点击输入框外面
  • 3.在名字的末尾添加一个斜杠
  • 4.删除名字
    动作和它对应的效果如下:
control-state-transitions-anim.gif

这个没有颜色效果,可以自己去搜搜

添加自定义 CSS ,以提供视觉反馈

validity-required-indicator.png

新建一个forms.css文件,添加两个样式的定义就达到了预期效果。
<pre>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
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="forms.css">
</pre>

(45)显示和隐藏有效性校验的错误信息

当用户删除姓名时,显示方式应该是这样的:

name-required-error.png

修改app/hero-form.component.html中的name框:
<pre><label for="name">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">
Name is required
</div>
</pre>
我们需要一个模板引用变量来访问模板中输入框的 Angular 控件。 这里,我们创建了一个名叫 name的变量,并且把它赋值为 "ngModel" .现在,通过把 div元素的 hidden属性绑定到 name控件的属性,我们就可以控制“姓名”字段错误信息的可见性了。
修改app/hero-form.component.html
<pre><div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
</pre>

添加一个英雄,并且重置表单

新增一个英雄按钮和英雄方法:<pre>
app/hero-form.component.html
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
app/hero-form.component.ts:
newHero() {
this.model = new Hero(42, '', '');
}
</pre>

通过 ngSubmit 来提交表单

<pre><form ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
<button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button></pre>
[disabled]代表删除必填项变灰和提交后变灰,
NgForm 指令:Angular 替我们做了。 Angular 自动创建了 NgForm 指令,并且把它附加到 <form> 标签上。
NgForm 指令为普通的 form 元素扩充了额外的特性。 它持有我们通过 ngModel 指令和 name 属性为各个元素创建的那些控件类,并且监视它们的属性变化,包括有效性。 它还有自己的 valid 属性,只有当 每一个被包含的控件 都有效时,它才有效。在填表完成之后,用户还应该能提交这个表单。 “提交”按钮位于表单的底部,它自己不会做任何事,但因为具有特殊的 type 值 (type="submit") ,所以它会触发表单提交。仅仅触发“表单提交”在目前是没用的。 要让它有用,我们还要用另一个 Angular 指令更新 <form> 标签—— NgSubmit , 并且通过事件绑定机制把它绑定到 HeroFormComponent.submit() 方法上。
##
这节结束了 请点个赞吧——_——*

推荐阅读更多精彩内容

  • 版本:Angular 5.0.0-alpha 表单是商业应用的支柱,我们用它来执行登录、求助、下单、预订机票、安排...
    soojade阅读 471评论 0 1
  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 2,290评论 0 3
  • 一、起项目 根据官方教程,执行以下: 然后要把下面文件略微改一下(官方没有写),否则编译出的js和ts混在一起,很...
    Angeladaddy阅读 971评论 0 3
  • Angular 2架构总览 - 简书http://www.jianshu.com/p/aeb11061b82c A...
    葡萄喃喃呓语阅读 769评论 2 12
  • 悲伤的意义是什么,快乐的意义又是什么呢? 很多人在不知不觉中转换着自己的角色,有多少是自主的,又有多少是被动的呢?...
    伊静同学阅读 34评论 0 1