プログラミング

プログラミング

PR

FormaArrayへのパス等でAngularフォームに複数のCheckboxのスキルを与える手順を解説!

6,992 views

読了時間 : 約1分6秒

この記事はAngularのリアクティブフォームをある程度知っている前提で書いています。

 

 

これが私たちの構造だとしましょう。

 

 

 

これをAngularフォームに変えていきます。目標は各スキルからselectedキーをベースにして、チェックボックスのスキルを与えることです。

 

フォームを作りましょう。

 

 

 

私たちのフォームはただskillsのキーだけを使ったグループです。

 

 

 

buildSkills()の方法を使うと、

  1. 1.各スキルからのselectedキーをベースに、イニシャルバリューと共にFormControlsの列を作ることができる。
  2. 2.その列をFormArrayへパスする。

 

一旦止まってformbuilderなしの最終構造を確認しましょう。

 

 

 

 

ここでHTMLを書くことができます。

 

 

 

コードはとてもシンプルです。単にスキルコントロールごとに繰り返し、各スキルをチェックボックスにつなげているのです。

  • コツ:
  • Indexを使って、スキルネームなどの他の情報を表示することができます。
  • 最終ステップはフォームバリューをサーバーに送れるものにマップすることです。

 

 

 

anguler①

 

 

 

 

※本記事は、Handling Multiple Checkboxes in Angular Formsを翻訳・再構成したものです。

おすすめ新着記事

おすすめタグ