帶有 Angular 的響應式表單

Question

你好，謝謝你的時間。 感謝@Steve：

如何從嵌套循環中的表單中檢索 FormArray？ 第一個循環是： const questions = this.form.controls.questions as FormArray; 以及如何將答案顯示為 const answers = this.form.controls.questins.answers 因為 FormArray 不起作用？

HTML：

 <form [formGroup]="form" (ngSubmit)="onSubmit()">
   <div *ngFor="let data of (form.controls.questions as FormArray); let iindex = index">
     <div> {{ iindex + 1 }}.  {{ question.questTxt }}</div>

     <div *ngFor="let answer of questions; let iindex=index;"
           formArrayName="questions">
       <radio-button
                    [radioId]="answer.answerId"
                    [radioName]="question.id"
                    [radioOptionTxt]="answer.answer"
                    ></radio-button>
     </div>
   </div>
   <button class="btn btn-primary" type="submit">Submit</button>
 </form>




   myData() {
        return [
                { id: 100, name: 'It is Name 1', questTxt: 'I like animals and I have',
                     'answers': [{answerId: 10, answer: 'Dog'},
                     {answerId: 11, answer: 'Cat'},
                     {answerId: 12, answer: 'Rabbit'}]},
                { id: 200, name: 'It is Name 2', questTxt: 'I like drawing by',
                     'answers': [{answerId: 20, answer: 'Pencil'},
                     {answerId: 21, answer: 'Ink'},
                     {answerId: 22, answer: 'Oil'},
                     {answerId: 23, answer: 'Sangina'}]},
                { id: 300, name: 'It is Name 3', questTxt: 'The color of my dog is',
                     'answers': [{answerId: 30, answer: 'white'},
                     {answerId: 31, answer: 'black'},
                     {answerId: 32, answer: 'white and black'},
                     {answerId: 33, answer: 'orange'}]},
                { id: 400, name: 'It is Name 4', questTxt: 'This year I visited',
                     'answers': [{answerId: 40, answer: 'England'},
                     {answerId: 41, answer: 'Germany'},
                     {answerId: 42, answer: 'Canada'},
                     {answerId: 43, answer: 'Israel'}]},
              ];
   }
}

Answer 1

你需要的是 Reactive Forms 的 FormArray 選項。

如果您的 JSON 傳回定義問題和答案的對象列表，您可以將它們插入到 FormGroup 控件中不斷增長的 FormArray 中。

this.formGroup = new FormBuilder.group({
    ...
    questions: this.formBuilder.array([])
})

然后，當您擁有數據並准備好填充表單時：

var questions = this.formGroup.controls.questions as FormArray;

現在遍歷返回為 JSON 的對象並將每個項目添加到問題數組中。

在 HTML 方面，您可以循環訪問問題控件：

*ngFor="let question of formGroup.controls.questions?.value"

這是一個（非常）簡短的例子。 我建議在網上查看更多材料，因為 FormArrays 學習起來很棘手，錯誤也很難定位。

編輯：循環遍歷數據 OK，假設您有一個包含問題的 JSON 數組，您可以將它們添加到 FormArray 中：

var questions = this.formGroup.controls.questions as FormArray;
this.questionsJSON.forEach(question => {
    questions.push(question);
})

console.log(this.formGroup.controls.questions); // should see the question as values of the FormArray