export class Movie{constructor(public id:number,public name:string,public age : string,public hobby?:string){}
}

import {Component} from '@angular/core';
import { Movie } from './movie';@Component({moduleId:module.id,selector:'movie-form',templateUrl:'./movie-form.component.html'
})export class MovieFormComponent{introduce = ['小城之春', '音乐之城','疯狂原始人', '里约大冒险'];model = new Movie(18,'July yu',this.introduce[0],'惊天魔盗团故事');submitted = false;onSubmit(){this.submitted = true;}get disgnostic(){return  JSON.stringify(this.model);}newMovie() {this.model = new Movie(42, '', '');}
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';import { AppComponent }  from './app.component';
import { MovieFormComponent } from './movie-form.component';@NgModule({imports:      [ BrowserModule , FormsModule],declarations: [ AppComponent , MovieFormComponent],bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';@Component({selector: 'my-app',template: '<movie-form></movie-form>'
})export class AppComponent { }

<div class="container"><div [hidden]="submitted"><h1>Movie Form</h1><form (ngSubmit)="onSubmit()" #movieForm="ngForm"><div class="form-group"><label for="name">Name</label><input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel"><div [hidden]="name.valid || name.pristine" class="alert alert-danger">Name is required</div></div><div class="form-group"><label for="hobby">Alter hobby</label><input type="text" class="form-control" id="hobby" [(ngModel)]="model.hobby" name="hobby"></div><div class="form-group"><label for="intro">Movie introduce</label><select class="form-control" id="intro" required [(ngModel)]="model.introduce" name="intro" #intro="ngModel"><option *ngFor="let i of introduce" [value]="i">{{i}}</option></select><div [hidden]="intro.valid || intro.pristine" class="alert alert-danger">Power is required</div></div><button type="submit" class="btn btn-success" [disabled]="!movieForm.form.valid">Submit</button><button type="button" class="btn btn-default" (click)="newMovie(); movieForm.reset()">New Movie</button></form></div><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 hobby</div><div class="col-xs-9 pull-left">{{ model.hobby }}</div></div><div class="row"><div class="col-xs-3">introduce</div><div class="col-xs-9 pull-left">{{ model.introduce }}</div></div><br><button class="btn btn-primary" (click)="submitted=false">Edit</button></div>
</div>