Angular 2 - 訪問嵌套Formarray（FormBuilder）

Question

我使用Angular 2 ReactiveForms創建表單。該表格由一個模板，問題&答案。模板包含很多問題，問題包含很多答案。

ngOnInit() { 
    // initialize template 
    this.myForm = this.formBuilder.group({ 
     title: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(30)]], 
     owner: [localStorage.getItem('user')], 
     questions: this.formBuilder.array([ 
      this.initQuestion() 
     ]) 
    }); 
} 

initQuestion() { 
    // initialize question 
    return this.formBuilder.group({ 
     questionText: [{value: '', disabled: true}], 
     answers: this.formBuilder.array([ 
      this.initAnswer() 
     ]) 
    }); 
} 

initAnswer() { 
    // initialize answer 
    return this.formBuilder.group({ 
     answerText: [{value: '', disabled: true}] 
    }); 
} 

addQuestion() { 
    const control = <FormArray>this.myForm.controls['questions']; 
    console.log(control); 
    control.push(this.initQuestion()); 
} 

addAnswer() { 
    const control = <FormArray>this.myForm.get(['questions.0.answers']); 
    control.push(this.initAnswer()); 
} 

我的目標是允許用戶添加問題到模板，並回答每個問題。然而，我的問題是，我無法訪問稱爲「答案」的嵌套數組。到目前爲止，我可以添加問題並且工作正常，但是當我嘗試添加問題的答案（addAnswer（）方法）時，我收到一條錯誤消息，提示「無法讀取'null'屬性'push' ，它在addAnswer（）方法中引用control.push。任何幫助表示讚賞！

編輯：忘了補充我的HTML代碼：

<table class=pageTable align=center border="1px"> 
 
    <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)" align=center> 
 
     <!-- we will place our fields here --> 
 
     <input type="submit" [disabled]="!myForm.valid" value="Submit Template"> 
 

 
     <!-- Template Title --> 
 
     <div class="form-group"> 
 
      <label>Template Title:</label><br/> 
 
      <input type="text" formControlName="title"><br/> 
 
      <!--display error message if name is not valid--> 
 
      <small *ngIf="!myForm.controls.title.valid" class="text-danger"> 
 
       Title must be between 5-30 characters. 
 
      </small> 
 
     </div> 
 

 
     <br/> 
 

 
     <!-- List of Questions --> 
 
     <div formArrayName="questions" align=center> 
 
      <div [formGroupName]="i" *ngFor="let question of myForm.controls.questions.controls; let i=index" class="Question-panel"> 
 
       <div class="Question-panel-title"> 
 
        <span>Question {{i + 1}}:</span> 
 
        <!-- show remove button when more than one address available --> 
 
        <span *ngIf="myForm.controls.questions.controls.length > 1" 
 
         (click)="removeQuestion(i)"> 
 
        </span> 
 
        <question [group]="myForm.controls.questions.controls[i]"></question> 
 
       </div> 
 

 
       <!-- Llist of Answers --> 
 
       <div formArrayName="answers" align=center> 
 
        <div [formGroupName]="j" *ngFor="let answer of question.controls.answers.controls; let j=index"> 
 
         <div class="Question-panel-content"> 
 
          <span>Answer {{j + 1}}:</span> 
 
          <br/><a (click)="addAnswer()" style="cursor: default"> 
 
           Add answer 
 
          </a> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <br/> 
 

 
     <a (click)="addQuestion()" style="cursor: default"> 
 
      Add question 
 
     </a> 
 
    </form> 
 
</table>

Answer 1

我認爲你應該使用字符串

this.myForm.get('questions.0.answers') 

或陣列狀

this.myForm.get(['questions', 0, 'answers']); 

更新

根據你的HTML

addAnswer(idx: number) { 
    const control = <FormArray>this.myForm.get(['questions', idx, 'answers']); 
    control.push(this.initAnswer()); 
} 

和HTML

<a (click)="addAnswer(i)">Add answer</a> 

參見

• Nested arrays in Angular 2 reactive forms?