ng2——表单提交

angular作为前端框架当然离不开htmlform表单，下边是我在学习的过程中对ng2表单中的应用

首先是声明一个类

export class Hero {
  constructor(
    public id:number,
    public name:string,
    public power:string,
    public alertEgo?: string){ }
}

然后定义组件，且定义组件内需要使用的数据模型对象

/*index.ts*/
import {Component} from '@angular/core';
import {Hero} from '../../hero';

@Component({
  selector:'test-form',
  templateUrl: 'app/pages/forms/index.html'
})

export class TestForm{
  powerList = ['yi','er','san','si','wu'];
  model = new Hero(123,'happen','yi','testMsg');
}

然后是界面

<form (ngSublime)="onSublime()" #testForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #spy #name="ngModel">
    <!-- 这里#name设置为ngmodel  指令的exportAs属性告诉angular如何链接模板引用变量到指令
  这里是把exportAs属性设置为ngModel -->
    {{model.name}}
    <!-- 该处用于界面内错误信息的认证 -->
    <p [hidden]="name.valid || name.pristine">姓名不能为空</p>
  </div>
  <div class="form-group">
    <label for="alterEgo">Alter Ego</label>
    <input type="text" name="alterEgo" id="alterEgo" [(ngModel)]="model.alertEgo" class="form-control"> {{model.alertEgo}}
  </div>
  <div class="form-group">
    <label for="power">Power</label>
    <select class="form-control" id="power" name="power" [(ngModel)]="model.power" required>
      <option *ngFor="let item of powerList" [value]="item">{{item}}</option>
    </select>
    {{model.power}}
  </div>
  <div class="form-group">
    <!-- 该处通过表单的验证来判断提交按钮的现实隐藏 -->
    表单是否可以提交{{testForm.form.valid}}
    <button type="submit" [disabled]="!testForm.form.valid">Submit</button>
  </div>
</form>