循环遍历平面阵列的表单构建器

Question

我想通过表单构建器列出一个平面数组：即。 [＆＃34;红色＆＃34;＆＃34;蓝色＆＃34;＆＃34;黄色＆＃34]。

我做了这样的表格：

this.myForm = this.fb.group({
            Answers: this.fb.array([])
        });

然后我将平面阵列推到这个控件上：

this.existingProfileDetail.Answers.forEach(element => {
    (<FormArray>this.myForm.get('Answers')).push(this.fb.control(element));
});

这样做很好，但我不知道如何列出模板上的答案，到目前为止我有这个：

<ol formArrayName="Answers">
                <li class="inputQuestion" *ngFor="let AnswerText of myForm.controls.Answers.controls; let c=index" [formGroupName]="c">
                  <label for="Answer">Answer {{c+1}}</label>
                  <input id="Answer" type="text" formControlName="AnswerText">
                </li>
              </ol>

Answer 1

您的formGroup有一个名为values的属性，可用于列出答案，

寻找myForm.values。

Answer 2

管理这样做。您需要省略[formGroupName]并在[formControlName]周围添加硬括号：

<ol formArrayName="Answers">
                <li class="inputQuestion" *ngFor="let answer of myForm.controls.Answers.controls; let i=index">
                  <label for="Answer">Answer {{i+1}}</label>
                  <input id="Answer" type="text" [formControlName]="i">
                </li>
              </ol>