2016-05-21 21 views
1

私は動的フォームを構築しようとしています。私の特別なケースでは、ユーザーが質問を定義し、オプションを動的に追加できるフォームが必要です。角2の動的フォームコントロール

質問タイトルは、ユーザーが質問を入力するテキストフィールドです。 オプションフィールドは、ユーザーが質問のオプションを追加するテキストフィールドでもあります。 ユーザーは、特定の質問に対して2つ以上のオプションを追加できます。私はFormbuilderを使用しています

はこのようなものを持っている:

this.form = fb.group({ 
      title: ["", Validators.required], 
      options: 
      fb.group({ 
       option1: new Control(''), 
       option2: new Control('') 
       ..... 
      }) 
     }); 

私はまた、我々はthis.form.addControlを使用してフォーム・グループにコントロールを追加し、this.form.removeControlを使用してコントロールを削除することができます知っています。

私は、ユーザーがオプションを追加/削除できるようにする必要がありますが、私は応答を送信したとき、私は以下のサーバーにポストしているように、これらの動的に追加されたオプションに名前を付ける方法がわから注意しています:

{ 
title:"My test question", 
options:{ 
"option 1","option 2","option 3",....... 
} 
} 

誰でもガイドしてくれますか?どんな助けも高く評価されます。

+0

このサイトをご覧ください:https://www.angular-meteor.com/tutorials/socially/angular2/adding-removing-objects-and-angular-event-handling – mayur

+0

ここにあなたはAngular 2のDynamic Formsに関するより多くの情報を持っています:https://playcode.org/dynamic-forms-in-angular-2/ – Eusthace

+0

MayurとEusthaceに感謝します。両方のリンクは、モデルから一度だけフォームを生成します。私が必要とするのは、ユーザーがフォームグループにコントロールを追加または削除することができるようにすることです。例えば、ユーザはn個のオプションで質問を定義することができる。ユーザーが質問の追加をクリックすると、質問テキスト用のテキストボックスと、オプションテキストを入力する2つのデフォルトのテキストボックスが表示されます。ユーザーがオプションを追加できるようにしたいとします。追加オプションをクリックすると、追加する別のテキストボックスが表示されます。同様にオプションテキストボックスを削除する必要がある追加オプションを削除することができます。 –

答えて

関連する問題