angular2学习笔记（7）

Form指令

Form指令需要引入NgForm 组件：import {NgForm} from 'angular2/common'

实例如下： 新建一个student.ts文件，作为实体类定义

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

address?表示在new 一个 student对象的时候，这个属性可以忽略

新建一个student-form.component.ts文件

import {Component} from '@angular/core';
import {NgForm}    from '@angular/common';
import { Student}    from './student';
@Component({
  selector: 'student-form',
  templateUrl: 'app/student-form.component.html'
})
export class StudentFormComponent {
  names= ['桂XX', '石XX', '陈XX', '沈XX'];
  model = new Student(1880,  this.names[0], 25,"上海市江月路雷特商务1803号");
  submitted = false;
  onSubmit() { this.submitted = true; }
  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }
}

上面的模板是外部引入方式，需要添加一个模板文件 hero-form.component.html

 class="container">
    
Student Form
    

       class="form-group">
         for="name">名字
         type="text" class="form-control" required>
      

class="form-group"> for="age">年龄 type="text" class="form-control" required>

class="form-group"> for="address">住址 type="text" class="form-control">

type="submit" class="btn btn-default">Submit

app.component.ts的代码修改一下：

import {Component}         from '@angular/core';
import {StudentFormComponent } from './student-form.component'
@Component({
  selector: 'my-app',
  template: '',
  directives: [StudentFormComponent ]
})
export class AppComponent { }

*ngFor运用到form中

修改上面的form表单 使用*ngFor循环names数组。

 class="form-group">
     for="name">名字
     class="form-control" required>
         *ngFor="#p of names" [value]="p">{{p}}