Angular 2提交动态表单

My DB有

问题

，每个问题有1-N个

问题类型

，一个

问题类型

的问题有0-N个可能的

答案

我正在尝试用Angular 2实现一个表单，这样我就可以使用

添加按钮

插入任意多个答案（标签+值），然后使用

保存按钮

保存每个类型的答案

---

问题是我不知道如何完成它，有什么帮助吗？

如果要在表单中使用数组，必须使用

FormBuilder

：

import {FormArray, FormBuilder, FormGroup} from '@angular/forms';

constructor(private fb: FormBuilder} {}

public questionsForm: FormGroup = this.fb.group({
  questions: this.fb.array([])
});

addInfo(label: string, value: string): void {

  const questions: FormArray = <FormArray>this.questionsForm.get('questions');

  questions.push(this.fb.group({label: label, value: value}));

  this.label = '';
  this.value = '';
}

saveQuestion(): void {

  // This will give you {questions: [{label: '', value: ''}, ...]}
  const formValue = this.questionsForm.value;
}

从'@angular/forms'导入{FormArray，FormBuilder，FormGroup}；
构造函数（私有fb:FormBuilder}{}
公开问题表单：FormGroup=this.fb.group({
问题：this.fb.array（[]）
});
addInfo（标签：字符串，值：字符串）：无效{
常量问题：FormArray=this.questionsForm.get（'questions'）；
push（this.fb.group（{label:label，value:value}））；
this.label=''；
这个值=“”；
}
saveQuestion（）：void{
//这将为您提供{问题：[{标签：''，值：'}，…]}
const formValue=this.questions form.value；
}

然后是模板：

<form [formGroup]="questionsForm" (ngSubmit)="saveQuestion()" novalidate>
  <div *ngFor="let info of questionForm.get('questions').controls" [formGroup]="info">
    <input formControlName="label>
    <input formControlName="value">
  </div>

  <input [(ngModel]="label" [ngModelOptions]="{standalone: true}" type="text" placeholder="label">
  <input [(ngModel]="value" [ngModelOptions]="{standalone: true}" type="text" placeholder="value">

  <button (click)="addInfo(label, value)">Add</button>

  <p>
    <button type="submit">Save Question</button>
  </p>
</form>

完成它意味着？如果你在插入新答案时转到plnkr，因为这两个问题都插入了，所以plnkr没有按预期工作