[Angular]リアクティブフォームでのセレクトボックスの扱い方。

Angularはまだ本が少ないので、リアクティブフォームの説明は基本的なところもほとんど乗ってなかったりします。
今回はよく使うであろう、セレクトボックスについて書いてみます。

tsファイルでは簡単にこんな感じになっているとしましょう。

~~
animals = [
  {name: 'ぶた'},
  {name: 'かば'},
  {name: 'やぎ'},
  {name: 'ねこ'}
]

constructor( private fb: FormBuilder ){}

ngOnInit() {
  this.formGroup = this.fb.group({
    animalForm: ['']
  });
}
~~

セレクトボックスをリアクティブフォームと紐付ける

ngValueを使えばOKです。

<form [formGroup]="formGroup">
  <select formControlName="animalForm">
    <option *ngFor="let animal of animals" [ngValue]="animal.name">{{animal.name}}</option>
  </select>
</form>

ちなみにtsファイルの方で、初期値を’やぎ’としておくと、やぎを選択しているようになります。
updateのときの対応はそんな感じでできるはずです。

なお、inputのchangeイベントのときにsetValueを使ってもリアクティブフォームの値の更新ができます。