AngularのForm(Template-driven Forms)メモ

(Angular v.4.3,6を利用)

<select>を利用する

  • *ngForを利用する
    • AngularJSのng-optionsのようなものはない
<select [(ngModel)]="model.power" name="power">
  <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>

NgFormとは

<form #heroForm="ngForm">

ngModelとname属性

  • ngModelを利用すると、自動的にFormControlインスタンスが生成される
  • FormControlインスタンスはname属性に割り当てられた名前でNgFormに登録される

NgModelインスタンスを取得

  • template reference variableを利用する
<input type="text" [(ngModel)]="model.name" name="name" #name="ngModel">

参考

Directive({
  selector: '[ngModel]:not([formControlName]):not([formControl])',
  providers: [formControlBinding],
  exportAs: 'ngModel'
})

バリデーション

<input>関連その他

参考

<input>操作時のイベントを取得したい

<input (keyup)="onKey($event)">
  • $eventオブジェクトのプロパティはDOMイベントのタイプによって変わる

値の確認

onKey(event: KeyboardEvent) {
  console.log((<HTMLInputElement>event.target).value);
}

$eventを利用せずに値を確認

(DOMイベント全体を渡さずに、値だけを渡したい。)

<!-- template reference variables を利用 -->
<input #box (keyup)="onKey(box.value)">

キーイベントをフィルタリングしたい

<!-- Enterキーに反応 -->
<input #box (keyup.enter)="onEnter(box.value)">