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; //红色
}
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; //红色
}