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?