技術

[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

【Rails】kaminariさんって配列もいけるんですね

どうも中田です。 久しぶりのブログになります。 railsでページングをする場合 …

no image

【rails】websocket-rails動きません!

どうも中田です。 巷ではrailsでwebsocketを動かすのは簡単♪簡単♪っ …

no image

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

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

no image

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

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

[Bitbucket] fatal: Could not read from remote repository.

どうも中田です こないだリモートリポジトリにPushできないんすけど〜という話を …