AngularJS2.0 学习笔记09:Form表单相关的指令

2016年09月20日 APP开发, javascript 暂无评论 阅读 32 views 次

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 'angular2/core';
import {NgForm}    from 'angular2/common';
import { Student}    from './student';
@Component({
  selector: 'student-form',
  templateUrl: 'app/student-form.component.html'
})
export class StudentFormComponent {
  names= ['马云', '马化腾', '刘强东', '周鸿祎'];
  model = new Student(1880,  this.names[0], 25,"北京市花神街39号");
  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 'angular2/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; }

submittedtrue时 隐藏输入表单

<div [hidden]="submitted">
    <h1>Student Form</h1>
    <form (ngSubmit)="onSubmit()" #studentForm="ngForm">

       <!-- ... all of the form ... -->

    </form>
  </div>

submittedfalse时 隐藏表单清单信息

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

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: