技術

[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

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

AWSのデフォルトリージョンを東京にしたい!

こんにちは。たなかです。 AWSにログインすると、リージョンがデフォルトでオハイ …

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

ブラウザでRailsのrouting設定を確認する

こんにちは Railsでroutingを確認する時、コマンドでrails rou …

no image

【AWS】nginx/rails/mysqlをインストール

どうも、中田です。 最近AWSにテストサーバを立ち上げて検証したり、 お客様に一 …