ng4学习笔记----Form表单一

1)最简单的表单click事件(不用传参)

 1 @Component({
 2   selector: ‘click-me‘,
 3   template: `
 4     <button (click)="onClickMe()">Click me!</button>
 5     {{clickMessage}}`
 6 })
 7 export class ClickMeComponent {
 8   clickMessage = ‘‘;
 9
10   onClickMe() {
11     this.clickMessage = ‘You are my hero!‘;
12   }
13 }

2)利用event对象将用户输入的值传入到组件Component中(不推荐)

 1 @Component({
 2   selector: ‘click-me‘,
 3   template: `
 4     <input (keyup)="onKey($event)">
 5   <p>{{values}}</p>`
 6 })
 7 export class ClickMeComponent {
 8   values = ‘‘;
 9
10   onKey(event: any) { // without type info
11     this.values += event.target.value + ‘ | ‘;
12   }
13 }

不指定onKey方法的参数event可以预防很多未知的错误.如果指定具体的参数类型:

1  onKey(event: KeyboardEvent) { // with type info
2     this.values += (<HTMLInputElement>event.target).value + ‘ | ‘;
3   }

在使用value属性之前要将event.target声明为HTMLInputElement类型,因为不是所有的对象都有value属性.

3) 使用模板参考变量(template reference variable) (推荐)

直接传递event事件太过于复杂,可以为表单元素先声明id,然后使用模板参考变量关联模板与组件.

不需要绑定到组件,也不需要组件做任何事情就可以在Template中获取到用户输入的值. 要注意的是只有当APP处理异步事件比如键盘敲击事件时,才会更新绑定数据. 所以下面代码中的(keyup)事件不可以省略但可以更换成任意事件比如,change,keypress等等. keyup事件不需要做任何事件,所以只是声明成最简短的(keyup)=‘0‘就可以了. 另外,这里的box即为 input元素本身.

注意:同一页面中表单元素#id 如同 DOM元素id一样,也应该是唯一的. 如果有相同的#id,angular虽然不会报错,但是值会错乱.

1 @Component({
2   selector: ‘loop-back‘,
3   template: `
4     <input #box (keyup)="0">
5     <p>{{box.value}}</p>
6   `
7 })
8 export class LoopbackComponent { }

传参的话,只要把box.value传给组件方法中即可.

 1 @Component({
 2   selector: ‘key-up2‘,
 3   template: `
 4     <input #box (keyup)="onKey(box.value)">
 5     <p>{{values}}</p>
 6   `
 7 })
 8 export class KeyUpComponent_v2 {
 9   values = ‘‘;
10   onKey(value: string) {
11     this.values += value + ‘ | ‘;
12   }
13 }

4)伪事件:key.enter--监听enter键

keyup监听每次键盘敲击抬起事件.enter键代表用户输入完成,所以有时候实际运用中我们只要监听enter键是否被敲击. angular中提供了简单的key.enter伪事件,帮我们省去了很多麻烦.(最起码不用再通过if一个个判断用户敲击的是不是enter建了).

 1 @Component({
 2   selector: ‘key-up3‘,
 3   template: `
 4     <input #box (keyup.enter)="onEnter(box.value)">
 5     <p>{{value}}</p>
 6   `
 7 })
 8 export class KeyUpComponent_v3 {
 9   value = ‘‘;
10   onEnter(value: string) { this.value = value; }
11 }

注意:key.enter泛指keyup.enter或者keydown.enter. 不要真的写key.enter......另外测了下,keypress.enter监听不到enter事件.也不知是什么原理.

上面的‘栗子‘有个BUG,那就是如果用户输入完成了,并没有按enter键怎么办,比如说用户只是输入完成后点击了页面其它位置,input输入框失去了焦点. 对的.没错,再给input输入框绑定blur事件就好啦. 同样是绑定到onEnter方法上

 1 @Component({
 2   selector: ‘key-up3‘,
 3   template: `
 4     <input #box (keyup.enter)="onEnter(box.value)" (blur)="onEnter(box.value)">
 5     <p>{{value}}</p>
 6   `
 7 })
 8 export class KeyUpComponent_v3 {
 9   value = ‘‘;
10   onEnter(value: string) { this.value = value; }
11 }

官网上有一个例子:用户输入完成后,将输入的值新增到heroes中, 并显示出来.

 1 @Component({
 2   selector: ‘little-tour‘,
 3   template: `
 4     <input #newHero
 5       (keyup.enter)="addHero(newHero.value)"
 6       (blur)="addHero(newHero.value); newHero.value=‘‘ ">
 7
 8     <button (click)="addHero(newHero.value)">Add</button>
 9
10     <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
11   `
12 })
13 export class LittleTourComponent {
14   heroes = [‘Windstorm‘, ‘Bombasto‘, ‘Magneta‘, ‘Tornado‘];
15   addHero(newHero: string) {
16     if (newHero) {
17       this.heroes.push(newHero);
18     }
19   }
20 }

其实我觉得,这个例子中,blur事件不应该绑定. 因为已经有button提供给用户点击了,不必要再监听blur事件,更何况blur事件如果绑定的话,点击button的时候会触发两次addHero方法. 一次click触发的,一次blur触发的.

另外如果按enter键会自动提交表单,这个只需要添加form标签包裹表单元素就好,至于submit事件要不要写看需求; 上面两步都做了以后,还有可能按enter添加的时候仍然会触发两个addHero方法. 这个时候就要指明button的type类型是简单的button. 不然enter还会触发一次button的click事件.

 1 @Component({
 2   selector: ‘little-tour‘,
 3   template: `
 4   <form #loginForm="ngForm">
 5       <input #newHero
 6         (keyup.enter)="addHero(newHero.value)"
 7        newHero.value=‘‘ ">
 8
 9       <button type="button" (click)="addHero(newHero.value)">Add</button>
10   </form>
11       <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
12   `
13 })
14 export class LittleTourComponent {
15   heroes = [‘Windstorm‘, ‘Bombasto‘, ‘Magneta‘, ‘Tornado‘];
16   addHero(newHero: string) {
17     if (newHero) {
18       this.heroes.push(newHero);
19     }
20   }
21 }
时间: 2024-10-07 23:34:57

ng4学习笔记----Form表单一的相关文章

Symfony2学习笔记之表单

对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单:假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所以你需要创建一个表单.在你开始之前,首先来看通用的Task类,用来表示和存储一个单

[学习笔记]--Jfinal 表单提交附件

最近,项目里面用到了Jfinal 里面的上传附件.Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单参数一起提交.页面类似下图: 这里form表单里面使用了 enctype="multipart/form-data" .先看看Jfinal手册的说明吧!大家看了就知道了 然后还有个问题 如果是表单提交 还不可以用ajax 提交,具体的原因呢也找到了 http://www.oschina.net/question/9410

MySQL学习笔记之三 表类型

你能用的数据库引擎取决于MySQL在安装时候是如何被编译的.要添加一个新的引擎,就必须编译MySQL.仅仅为了添加一个特性而编译应用程序的想法对于Windows的开发人员来说可能有点小题大做,得不偿失,但是在Unix的世界里,这已经成为了标准.在缺省的情况下,MySQL支持三个引擎:ISAM.MyISAM和HEAP.另外两种类型InnoDB和Berkley(BDB),也常常可以使用. ISAM ISAM是一个定义明确且历经时间考验的数据表格管理方法,它在设计之初就考虑到数据库被查询的次数远远大于

MySQL学习笔记-操作数据表中的记录

MySQL学习笔记-操作数据表中的记录 1.插入记录 INSERT INSERT [INTO] tbl_name [(col_name,...)] {VAULES|VALUE} ({expr|DEFAULT},...),(...),... 例,插入单条记录: mysql> USE testDatabase changed mysql> CREATE TABLE users(    -> id SMALLINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,   

数据结构学习笔记——线性表的应用

数据结构学习笔记——线性表的应用 线性表的应用 线性表的自然连接 计算任意两个表的简单自然连接过程讨论线性表的应用.假设有两个表A和B,分别是m1行.n1列和m2行.n2列,它们简单自然连接结果C=A*B(i==j),其中i表示表A中列号,j表示表B中的列号,C为A和B的笛卡儿积中满足指定连接条件的所有记录组,该连接条件为表A的第i列与表B的第j列相等. 如:         1 2 3                3 5 A  =  2 3 3         B =  1 6       

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果

struts2学习笔记之五:表单数据收集的几种方式

方法一:struts2对ModelDriven模式的支持(模型驱动模式) Struts2可以采用类似于Struts1中的ActionForm方式收集数据,这样方式叫ModelDriven模式 Action需要实现ModelDriven接口,实现getModel()方法,返回Bean对象,这样struts2会通过getModel()方法拿到对象,使用set方法把数据填充到对象中 创建User类(Bean对象,包含geter方法和seter方法的纯java类) User类 package com.d

Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

Bootstrap3学习笔记:表单

<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport&q