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

<div class="container">    <h1>Student Form</h1>    <form>      <div class="form-group">        <label for="name">名字</label>        <input type="text" class="form-control" required>      </div>      <div class="form-group">        <label for="age">年龄</label>        <input type="text" class="form-control" required>      </div>     <div class="form-group">        <label for="address">住址</label>        <input type="text" class="form-control">      </div>      <button type="submit" class="btn btn-default">Submit</button>    </form></div>

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

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

*ngFor运用到form中

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

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

使用*ngModel 数据绑定

<select class="form-control" required  [(ngModel)]="model.name" >...</select><input type="text" class="form-control" required  [(ngModel)]="model.age" >

用ngControl进行状态跟踪和校验

<select class="form-control" required  [(ngModel)]="model.name" ngControl="name">...</select><input type="text" class="form-control" required  [(ngModel)]="model.age" ngControl="age">

ngcontrol不只是跟踪状态 ,它通过三种样式类来更新控件 这些样式反应了控件状态。

• 控件已访问 ---------true：ng-touched ------false：ng-untouched
• 控件的值已更新-----true：ng-dirty-----------false：ng-pristine
• 控件的值是有效的---true：ng-valid-----------false：ng-invalid

增加控件对应的样式style.css

.ng-valid[required] {  border-left: 5px solid #42A948; /* green */}.ng-invalid {  border-left: 5px solid #a94442; /* red */}

在index.html中引入style.css：<link rel="stylesheet" href="styles.css">

显示/隐藏校验错误信息

     <div class="form-group">        <label for="age">年龄</label>        <input type="text" class="form-control" required  [(ngModel)]="model.age"                  ngControl="age"  #age="ngForm">           <div [hidden]="age.valid" class="alert alert-danger">请输入您的年龄</div>      </div>

提示 ：添加这段代码时 需要重新npm start才能正常显示

ngSubmit 提交表单

<form (ngSubmit)="onSubmit()" #studentForm="ngForm">

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

切换2个窗体区域

当表单提交后，我们需要显示一个表单提交后的信息，这个时候需要表单窗体的切换。 在组件中定义一个属性 用于切换表单提交前和提交后的显示

submitted = false;onSubmit() { this.submitted = true; }

当submitted为true时 隐藏输入表单

<div [hidden]="submitted">    <h1>Student Form</h1>    <form (ngSubmit)="onSubmit()" #studentForm="ngForm">       <!-- ... all of the form ... -->    </form>  </div>

当submitted为false时 隐藏表单清单信息

<div [hidden]="!submitted">  <h2>您提交的信息:</h2>  <div class="row">    <div class="col-xs-3">姓名</div>    <div class="col-xs-9  pull-left">{{ model.name }}</div>  </div>  <div class="row">    <div class="col-xs-3">年龄</div>    <div class="col-xs-9 pull-left">{{ model.age}}</div>  </div>  <div class="row">    <div class="col-xs-3">地址</div>    <div class="col-xs-9 pull-left">{{ model.address}}</div>  </div>  <br>  <button class="btn btn-default" (click)="submitted=false">编辑</button></div>