PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 588|回复: 0

如何制作Angularjs4.0表单

[复制链接]

40

主题

73

帖子

306

积分

中级会员

Rank: 3Rank: 3

积分
306
发表于 2017-8-11 10:31:54 | 显示全部楼层 |阅读模式
本帖最后由 幽梦林子 于 2017-8-11 15:24 编辑

如何制作Angularjs4.0表单,具体操作如下:


一、创建 表单Hero 模型类
  1. src/app/hero.ts  //文件路径
  2. export class Hero {
  3.   constructor(
  4.     public id: number,
  5.     public name: string,
  6.     public power: string,
  7.     public alterEgo?: string
  8.   ) {  }
  9. }
复制代码


二、创建 表单控制器

1.创建 组件
  1. src/app/hero-form.component.ts //文件路径
  2. import { Component } from '@angular/core';

  3. import { Hero }    from './hero';

  4. @Component({
  5.   selector: 'hero-form',
  6.   templateUrl: './hero-form.component.html'
  7. })
  8. export class HeroFormComponent {

  9.   powers = ['Really Smart', 'Super Flexible',
  10.             'Super Hot', 'Weather Changer'];

  11.   model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  12.   submitted = false;

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

  14.   // TODO: Remove this when we're done
  15.   get diagnostic() { return JSON.stringify(this.model); }
  16.   newHero() { this.model = new Hero(42, '', '');}
  17.   
  18. }
复制代码


2.导入 组件
  1. src/app/app.module.ts  //文件路径
  2. import { NgModule }      from '@angular/core';
  3. import { BrowserModule } from '@angular/platform-browser';
  4. import { FormsModule }   from '@angular/forms';
  5. import { AppComponent }  from './app.component';
  6. import { HeroFormComponent } from './hero-form.component';
  7. @NgModule({
  8.   imports: [
  9.     BrowserModule,
  10.     FormsModule
  11.   ],
  12.   declarations: [
  13.     AppComponent,
  14.     HeroFormComponent
  15.   ],
  16.   bootstrap: [ AppComponent ]
  17. })
  18. export class AppModule { }
  19. 3.修改 app.component.ts根组件
  20. src/app/app.component.ts  //文件路径
  21. import { Component } from '@angular/core';
  22. @Component({
  23.   selector: 'my-app',
  24.   template: ''
  25. })
  26. export class AppComponent { }
复制代码


三、创建视图,初始 HTML 表单模板
  1. src/app/hero-form.component.html  //文件路径
  2. <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">     
  3. <style>
  4. //定义css
  5. .ng-valid[required], .ng-valid.required  {
  6.   border-left: 5px solid #42A948; /* green */
  7. }
  8. .ng-invalid:not(form)  {
  9.   border-left: 5px solid #a94442; /* red */
  10. }

  11. </style>


  12. <div class="container">
  13.   <div [hidden]="submitted">
  14.     <h1>Hero Form</h1>
  15.     <form (ngSubmit)="onSubmit()" #heroForm="ngForm">   //ngSubmit表单提交
  16.       <div class="form-group">
  17.         <label for="name">Name</label>
  18.         <input type="text" class="form-control" id="name"
  19.                required
  20.                [(ngModel)]="model.name" name="name"   //ngModel数据双向绑定
  21.                #name="ngModel">
  22.         <div [hidden]="name.valid || name.pristine"
  23.              class="alert alert-danger">
  24.           Name is required
  25.         </div>
  26.       </div>
  27.       <div class="form-group">
  28.         <label for="alterEgo">Alter Ego</label>
  29.         <input type="text" class="form-control" id="alterEgo"
  30.                [(ngModel)]="model.alterEgo" name="alterEgo">
  31.       </div>
  32.       <div class="form-group">
  33.         <label for="power">Hero Power</label>
  34.         <select class="form-control" id="power"
  35.                 required
  36.                 [(ngModel)]="model.power" name="power"
  37.                 #power="ngModel">
  38.           <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
  39.         </select>
  40.         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">  //表单字段验证
  41.           Power is required
  42.         </div>
  43.       </div>
  44.       <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  45.       <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
  46.     </form>
  47.   </div>
  48.   <div [hidden]="!submitted">
  49.     <h2>You submitted the following:</h2>
  50.     <div class="row">
  51.       <div class="col-xs-3">Name</div>
  52.       <div class="col-xs-9  pull-left">{{ model.name }}</div>
  53.     </div>
  54.     <div class="row">
  55.       <div class="col-xs-3">Alter Ego</div>
  56.       <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
  57.     </div>
  58.     <div class="row">
  59.       <div class="col-xs-3">Power</div>
  60.       <div class="col-xs-9 pull-left">{{ model.power }}</div>
  61.     </div>
  62.     <br>
  63.     <button class="btn btn-primary" (click)="submitted=false">Edit</button>
  64.   </div>
  65. </div>
复制代码


四、ngModel表单Angular CSS 类来更新控件

8.png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2018-7-19 00:23 , Processed in 0.407829 second(s), 34 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表