技術

[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

[wordpress]パーミションを変えたらHTTP500(Internal Server Error)

こんばんは Kusanagiにインストールしたwordpressの管理画面からフ …

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

no image

【gem/bundle】あんたたち一体どういう関係なのよ!!

どうも中田です。 今回はgemとbundleの話。 前置き よくあるgemの説明 …

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …

[Rails]rake db:seedに成功しているのにuserテーブルにデータが作成されない!

こんにちは。たなかです。 railsで開発してて、seedファイルがうまく流し込 …