Angular 2 提交表单 - 学习 AngularJS 2 - 简单教程，简单编程

经过前面几章节的努力，我们的表单已经有了一些基本的验证

现在，我们继续完善这个表单，完成提交表单的功能

修改 app/site-form.component.html 文件，给 "提交按钮" 添加点击事件

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

然后修改 app/site-form.component.ts 文件添加 "newSite()" 方法

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.twle.cn', '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);
  }
}

我们给组件添加一个 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 修改成以下内容

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.twle.cn', '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 为以下内容

<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 和 typing )

源代码下载

需要使用下面的命令查看结果

$ npm install --registry=https://registry.npm.taobao.org
$ npm start