技術

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

-技術
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Vagrant】はじめまして!はじめました!

どうも中田です。 仮想マシンと言えば、VMWare、EC2、VirtualBox …

no image

OSSに貢献してみたい人向けチュートリアルの紹介

こんばんは githubのtrendingを眺めてたら、OSSに貢献してみたい人 …

[ionic] アプリ名にハイフンやアンダーバー入ってると困る件

どうも中田です 今日もionicのお話。 スマホアプリ作るときに test-ap …

no image

videoタグとIEの話

以前下記のようなコードでvideoの再生が終了したら別な動画をsrcにセットして …

[Angular6] Angularのユニットテストでprivate変数を読み込む

Angularでテストコードを書いている時、component側で定義しているp …