Angular 2 - 访问嵌套的 Formarrays (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());
}

我的目标是允许用户向模板添加问题，并回答每个问题。然而，我的问题是我无法访问名为“answers”的嵌套数组。到目前为止，我可以添加问题并且它工作正常，但是当我尝试添加问题的答案（addAnswer() 方法）时，我收到一条错误消息“无法读取 null 的属性‘push’” ，它引用了 addAnswer() 方法中的 control.push。任何帮助表示赞赏！

编辑：忘记添加我的 HTML 代码：

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());
}

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>

也可以看看

• Angular 2 反应形式的嵌套数组？