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 }

ng4學習筆記----Form表單一