入れ子になったフォームにFormarrayを追加するときに配列を取得する理由

Question

私はangular2チュー​​トリアルと非常によく似た反応型を開発しようとしています。

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> 

Answer 1

がコードで十分に確認してください：

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

Test

new Question()を呼び出すと、このクラスにプロパティはありません。

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

Plunker Example