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を使ってもリアクティブフォームの値の更新ができます。