Angular2 表单（一） 用户输入

绑定到用户输入事件

　　等号左边的 (click) 表示把按钮的点击事件作为绑定目标。 等号右边引号中的文本是模板语句，通过调用组件的 onClickMe 方法来响应这个点击事件。

<button (click)="onClickMe()">Click me!</button>

通过 $event 对象取得用户输入

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

export class KeyUpComponent_v1 {
  values = '';

  onKey(event: any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

　　所有标准 DOM 事件对象都有一个 target 属性， 引用触发该事件的元素。在本例中，target 是<input> 元素， event.target.value 返回该元素的当前内容。

$event的类型

export class KeyUpComponent_v1 {
  values = '';

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

从一个模板引用变量中获得用户输入

　　使用 Angular 的模板引用变量。 这些变量提供了从模块中直接访问元素的能力。 在标识符前加上井号 (#) 就能声明一个模板引用变量。

　　从模板变量获得输入框比通过 $event 对象更加简单。

@Component({
  selector: 'app-key-up2',
  template: `
    <input #box (keyup)="onKey(box.value)">
    <p>{{values}}</p>
  `
})
export class KeyUpComponent_v2 {
  values = '';
  onKey(value: string) {
    this.values += value + ' | ';
  }
}

按键事件过滤（通过 key.enter）

失去焦点事件 (blur)

　　 (keyup) 事件处理器监听每一次按键。 有时只在意回车键，因为它标志着用户结束输入。 解决这个问题的一种方法是检查每个 $event.keyCode，只有键值是回车键时才采取行动。@Component({  selector: 'app-key-up3',

@Component({
  selector: 'app-key-up4',
  template: `
    <input #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">

    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
}