简单的来谈一谈angular2.0的表单

这一次真的只是简单聊一聊。

开门见山吧~~~~

首先先创建一个Hero模板类。

里面含有如下内容：

export class Hero{

   constructor(

     public id:number,

     public name:string,

    public power:string,

    public alterEgo?:string

){}

}

注意：？表示可选的。

看hero里的代码就知道有一个Hero类，里面有四个属性，包括一个可选属性。

下面再介绍组件。所有的解释都写在代码里面了。

import { Component, OnInit } from '@angular/core'; //OnInit用于初始化，可以不需要，//我这边是自动创建的才会有import { Hero } from './hero'; //引入Hero.ts 因为需要在里面调用它。总之就是那里需要调用哪里就引入/*    Angular 表单分为两个部分：基于HTML的模板和组件的类，用来程序处理数据和用户交互。 */@Component({  selector: 'hero-from',  //到时候只需要在app.module.ts里面引入<hero-from>标签就可以将我们的视图显示  templateUrl: './hero-from.component.html', //这边采用的是引入模板，    //也就是所有的表单代码都写在独立的html5页面  styleUrls: ['./hero-from.component.css'] //如果需要对其进行样式操作就可以写这个，不需要就可以不写。   //其实像这种引入外部模板的方式虽然会比都写在一个页面缓慢，但是这样单独写出来可以方便我们修改操作，而且浏览器是有    //缓存的，只是第一次的时候刷出比较慢，后面都比较快。 })export class HeroFromComponent implements OnInit {  ngOnInit() {  //如果没有OnInit 就可以不需要  }   powers=['Really Smart','Super Flexible','Super Hot','Weather CHANGER'];   myHero=new Hero(18,'DR IQ',this.powers[0],'chuck Overstreet');//按照hero类的格式插入数据  submitted=false; //这是判断表单是否提交的  onSubmit(){ //一个方法       this.submitted=true;     }     addHero(){  //一个添加英雄的方法       this.myHero=new Hero(42,'','');     }}

当然还需要在app.module中引入

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms'; //需要引入表单模型import { HttpModule } from '@angular/http';import { HeroFromComponent } from './hero-from/hero-from.component'; //引入上面编写的组件@NgModule({  declarations: [    HeroFromComponent //需要引入的，名字记得和上面{}里面对应  ],  imports: [    BrowserModule,    FormsModule, //导入表单模型    HttpModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }

其实我在webstorm里面全部都会自动引入。如果你的app.module.ts里面也有了就不需要引入了。

接下来看看在hero-form.component.html里面怎么写的。

<!--模块一-->  <div  [hidden]="submitted"><!--默认未提交表单 false-->    <h1>Hero Form</h1>    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">模板引用变量可以访问模板中输入框的 Angular 控件//。这里，创建了名叫heroForm的变量，并且赋值为"ngForm"      <div>        <label for="name">Name</label>        <input type="text" id="name"               required               [(ngModel)]="myHero.name" name="name" >//myHero对应组件里面命名的MyHero      </div>      <div>        <label for="alterEgo">Alter Ego</label>        <input type="text" id="alterEgo"               [(ngModel)]="myHero.alterEgo" name="alterEgo">      </div>      <!--[]从模型到视图的单向数据绑定  在使用ngModel做双向数据绑定之前，得先导入FormsModule，          把它加入 Angular 模块的imports列表。 ()这是从视图到模型的反向单向数据绑定。            [(ngModel)]双向数据绑定 必须具有name属性-->      <div>        <label for="power">Hero Power</label>        <select id="power"                 required                [(ngModel)]="myHero.power" name="power"                 > //这边是一个下拉框//ngFor的*前缀表示<option>及其子元素组成了一个主控模板。 <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> //*ngFor将定义的powers//获取到，并采用{{}}让其显示 </select>      </div>      <!--表单不能通过验证不能按-->      <button type="submit"  [disabled]="!heroForm.form.valid">Submit</button>  <!--两个方法  一个addHero  一个是本身heroForm拥有的重置 当点击button时出现的是模块二里的东西--> <button type="button"  (click)="addHero(); heroForm.reset()">New Hero</button>    </form>  </div><!--模块二--> <div [hidden]="!submitted">    <h2>You submitted the following:</h2>    <div>      <div>Name:{{ myHero.name }}</div>    </div>    <div>      <div>Alter Ego :{{ myHero.alterEgo }}</div>    </div>    <div>      <div>Power:{{ myHero.power }}</div>    </div>    <br>    <button (click)="submitted=false">Edit</button><!--重回模块一--></div>