Angular2学习笔记.4、表单相关，双向数据绑定，HeroForm

开始

本次我们将会学会如何用Angular创建表单、two-way data binding(双向数据绑定)、change tracking(检测变化)、validation(验证) 和 error handling(错误处理)等功能以及ngModel、ngControl和ngForm等指令的应用。
这次内容比较长，在最后会给出一个完成的工程来实践本篇的内容。在这个过程中你可以配合演示来实时地观察效果。
参考官方文档

工程结构

/  
|-package.json  
|-index.html  
|-node_modules/  
  |-libraries  
  |-...  
|-HeroForm/
  |-index.html
  |-app/
    |-main.js
    |-app.component.js 
    |-hero.js
    |-hero-form.component.js
    |-template/
      |-hero-form.component.template
    |-css/
      |-styles.css

正文

概览

表单创造了了一种有cohesive（粘合力）、effective（有效)并且compelling（引人入胜）的数据输入体验（来自官方文档，我不能很好的翻译和解释这句话）。一个Angular表单用来协调进行了数据绑定的用户控件、track(检测)改变、验证输入和显示错误。
我们都使用过表单进行过登录、提交帮助请求、下订单、订飞机、设定会议日程和其他无数的数据输入任务。表单支撑起了商业应用。
任何经验丰富web开发者都可以用正确的标签来拼凑HTML表单。更具挑战的是通过表单背后的数据流来创建有粘合力的数据输入体验以帮助用户的行为变得有效且高效。
在表单这部分，Angular处理了很多重复、模式化的任务，因此我们不必浪费很多精力。
我们将要创建一个表单，用于输入一个hero的相关信息，它有name、power(能力)、alter ego（密友）这三个属性，其中name、power是必填的，alter ego是可选的，power是一个列表以选择其中一项。当用户没有填写name时，会给出验证错误，提示name是必填项。当没有正确填写时，不可点击提交按钮。点击提交后会显示出刚刚提交的信息，此时点击编辑会重新填写表单。

创建hero的Model

创建表单，首先需要一个数据模型提供基础。在用户输入表单数据时我们会捕捉到改变并且更新到Model的一个实例。
这个Model只包含了hero的三个属性。
创建/HeroForm/app/hero.js，内容为：

(function(app) {
  app.Hero = Hero;
  function Hero(id, name, power, alterEgo) {
    this.id = id;
    this.name = name;
    this.power = power;
    this.alterEgo = alterEgo;
  }
})(window.app || (window.app = {}));

这段代码非常简单，不在赘述。

表单组件

一个Angular表单包含两部分：基于HTML的模板和基于代码的组件来处理数据和用户交互（Model对Angular表单来说不是必须的）。
接下来创建一个组件来协调View和Model。
创建/HeroForm/app/hero-form.component.js，内容为：

(function(app) {
   
  app.HeroFormComponent = ng.core.Component({
      selector: 'hero-form',
      templateUrl: '/HeroForm/app/template/hero-form.component.template'
    }).Class({
      constructor: function() {
   
        this.powers = ['Really Smart', 'Super Flexible',
          'Super Hot', 'Weather Changer'
        ];
        this.model = new app.Hero(18, 'Dr IQ', this.powers[0],'Chuck Overstreet');
        this.submitted = false;
      },
      onSubmit: function() {
   
        this.submitted = true;
      },
      diagnostic: function() {
   
        return JSON.stringify(this.model);
      }
  })
})(window.app || (window.app={}));

可以看到定义了一个HeroFormComponent组件到window.app，这个组件选择了模板中的<hero-form>标签来进行实例化，模板通过URL定位。在构造函数中初始化了power数组，定义了hero的各种能力供用户选择。这在之前的文章都已经提到过了。在构造函数中还实例化了一个Hero作为model成员，这个成员会和表单进行交互。submitted表示表单是否被提交过了，控制表单的显示。diagnostic用于调试，让我们直观地看到model的变化。

创建一个HTML模板初始化表单

创建/HeroForm/app/template/hero-form.component.template，内容为：