angular2--笔记--表单创建

1.创建Hero模型类
2.创建控制此表单的组件即Component
3.创建具有初始表单布局的模板template
4.使用ngModel双向数据绑定语法把数据属性绑定到每个表单的输入控件
5.往每个表单的输入控件上添加name属性
6.添加自定义的css来提供视觉反馈
7.显示和隐藏有效性验证的错误信息
8.使用ngSubmit处理表单提交
9.禁用此表单的提交按钮，直到表单变为有效

--------------------------------1.hero.ts
export class Hero{
    constructor(
        public id: number,
        public name: string,
        public power: string,
        public alterEgo?: string
    ){ }
}

//创建一个hero
let myHero = new Hero(42,'skyDog','fetch any object at any distance','Leslie Rollover');
console.log('My hero is called'+myHero.name);

---------------------------------2.hero-form.component.ts
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; }
    //新增英雄方法
    active = true;
    newHero(){
        this.model = new Hero(42,'','');
        this.active = false;
        setTimeout(() => this.active =true,0);
    }

    //Remove this when we're done
    get diagnostic(){return JSON.stringify(this.model);}
}

--------------------------------------3.app/app.module.ts
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{}


--------------------------------------------4.app/app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: '<hero-form></hero-form>'
})

export class AppComponent {}

-----------------------------------------5.初始html表单:app/hero-form.component.html
//  []是一个从模型到视图的单向数据绑定
//  ()是一个从视图到模型的反向单向数据绑定
//  [()]是双向数据绑定
<div  [hidden]="submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
        <div class="col-xs-3">Name</div>
        <div class="col-xs-9 pull-left" >{{model.name}}</div>
    </div>
    <div class="row">
        <div class="col-xs-3">Alter Ego</div>
        <div class="col-xs-9 pull-left" >{{model.alterEgo}}</div>
    </div>
    <div class="row">
        <div class="col-xs-3">Power</div>
        <div class="col-xs-9 pull-left" >{{model.power}}</div>
    </div>
    <br>
    <button class="btn-default" (click)="submitted=false">Edit</button>
</div>
<div class="container">
    <h1>Hero Form</h1>
    <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm" >

    {{diagnostic}}  <!-- 用来诊断的-->
        <div class="form-group">
            <lable for="name">Name</lable>
            <input type="text" class="form-control" id="name"
                    required [(ngModel)]="model.name" name="name" #name="ngModel">
        </div>
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger" />

        <div class="form-group">
            <lable for="alterEgo">Alter Ego</lable>
            <input type="text" class="form-control" id="alterEgo" [(ngModel)]="model.alterEgo" name="alterEgo">
        </div>

        <div class="form-group">
            <lable for="power">Hero Power</lable>
            <select class="form-control" id="power" required [(ngModel)]="model.power" name="power">
                <option *ngFor="let p of powers" [value]="p" >{{p}}</option>
            </select>
        </div>

        
        <!--新增英雄按钮-->
        <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>


        <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>

    </form>
</div>


-----------------------------6.forms.css
.ng-valid[required],
.ng-valid.required{
    border-left: 5px solid #42A948; //绿色
}
.ng-invalid:not(form){
    border-left: 5px solid #a94442; //红色
}