为什么我在将Formarray添加到嵌套表单时遇到数组

我正在尝试开发一个与angular2教程非常相似的反应形式。它工作正常，但是当我要添加新的问题，我得到以下错误：为什么我在将Formarray添加到嵌套表单时遇到数组

EXCEPTION: Error in ./RecommendationDetailsComponent class RecommendationDetailsComponent - inline template:45:40 caused by: Cannot find control with path: 'questions -> 1 -> id'

删除问题工作正常。有没有人有一个想法，我可能会找到解决方案。我不清楚这里究竟是什么问题。

模型：仔细代码

export class Recommendation { 
    _id?: string; 
    recommendation: string; 
    questions: Question[]; 
    } 
} 

export class Question { 
    id: ''; 
    question: ''; 
    date: ''; 
}

推荐-details.component.ts

import { Component, Input, OnChanges } from '@angular/core'; 
import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; 

import { Recommendation, Question } from '../recommendation'; 
import { RecommendationService } from '../recommendation.service'; 

@Component({ 
    selector: 'recommendation-details', 
    templateUrl: './recommendation-details.component.html', 
    styleUrls: ['./recommendation-details.component.css'], 
    providers: [RecommendationService] 
}) 

export class RecommendationDetailsComponent implements OnChanges { 
    @Input() 
    Recommendation: Recommendation; 

    @Input() 
    createHandler: Function; 
    @Input() 
    updateHandler: Function; 
    @Input() 
    deleteHandler: Function; 

    recommendationForm: FormGroup; 

    constructor (private fb: FormBuilder, private recommendationService: RecommendationService) {this.createForm()} 

    // creatForm Creert een basisformulier om gegevens te wijzigen 
    createForm() { 
    this.recommendationForm = this.fb.group({ 
     recommendation: '', 
     topic: '', 
     secTopic: '', 
     questions: this.fb.array([]), 
    }) 
    console.log('Form created') 
    } 

    // Elke keer dat een andere Recommendation wordt gekozen, verander dan de waarden van het formulier 
    ngOnChanges() { 
    if (this.Recommendation == null) { 
     console.log('waiting...'); 
    } else { 
     this.recommendationForm.reset ({ 
     recommendation: this.Recommendation.recommendation 
     }) 
     this.setQuestions(this.Recommendation.questions); 
    } 
    }; 

    get questions(): FormArray { 
    return this.recommendationForm.get('questions') as FormArray; 
     console.log(this.questions); 
    } 

    setQuestions(questions: Question[]) { 
    console.log ('Hallo ' + questions[0].question); 
    const questionFGs = questions.map(question => this.fb.group(question)); 
    const questionFormArray = this.fb.array(questionFGs); 
    this.recommendationForm.setControl('questions', questionFormArray); 
    } 

    addQuestion() { 
    console.log(this.questions); 
    this.questions.push(this.fb.group(new Question())); 
    } 

    } 
}

HTML

<form [formGroup]="recommendationForm" novalidate> 
    <div class="form-group"> 
    <label class="center-block">Recommendation: 
     <input class="form-control" formControlName="recommendation"> 
    </label> 
    </div> 

<div formArrayName="questions" class="well well-lg"> 
    <div *ngFor="let question of questions.controls; let i=index" [formGroupName]="i" > 
     <!-- The repeated address template --> 
     <h4>Question{{i + 1}}</h4> 
     <div style="margin-left: 1em;"> 
     <div class="form-group"> 
      <label class="center-block">ID: 
      <input class="form-control" formControlName="id"> 
      </label> 
     </div> 
     <div class="form-group"> 
      <label class="center-block">Question: 
      <input class="form-control" formControlName="question"> 
      </label> 
     </div> 
     <div class="form-group"> 
      <label class="center-block">Date: 
      <input class="form-control" formControlName="date"> 
      </label> 
     </div>  
     </div> 
    <button (click)="removeQuestion(i)" type="button">Remove</button> 
    </div> 
    <button (click)="addQuestion()" type="button">Add</button> 
</div> 
</form> 
<p>recommendationForm value: {{ recommendationForm.value | json}}</p>

来源

2017-03-17 Mihaly

的是：角执行Object.keys上，你传递给fb.group方法

_reduceControls(controlsConfig: {[k: string]: any}): {[key: string]: AbstractControl} { const controls: {[key: string]: AbstractControl} = {}; Object.keys(controlsConfig).forEach(controlName => { controls[controlName] = this._createControl(controlsConfig[controlName]); }); return controls; }

你的情况，价值Object.keys(new Question())将[]

所以将其替换为一个模板代码？ –

@Roman C你是什么意思？ – Mihaly

看：

export class Question { 
    id: ''; 
    question: ''; 
    date: ''; 
}

Test

如果你打电话给new Question()，这个班没有任何属性。

export class Question { 
    id = ''; 
    question = ''; 
    date = ''; 
}

Plunker Example

来源

2017-03-17 14:00:33 yurzui

为什么我在将Formarray添加到嵌套表单时遇到数组

回答

相关问题