angular2表单初体验

1.创建movie模型。

最近对angular2比较感兴趣，跟着官网学习一段，练习了一个表单demo！

src/app/movie.ts文件：

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

 

2.创建表单组件。

src/app/movie-form.component.ts文件：

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, '', '');
    }
}

 

3.定义应用的根模块。

src/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 { MovieFormComponent } from './movie-form.component';

@NgModule({
  imports:      [ BrowserModule , FormsModule],
  declarations: [ AppComponent , MovieFormComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 

}

 

4.创建根组件。

src/app/app.component.ts文件：

import { Component } from '@angular/core';

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

export class AppComponent { }

 

5.创建表单模板。

src/app/movie-form.component.html文件：

<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>