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 代码:

<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?