フォームグループに値が読み込まれないのはなぜですか？

Question

私はここで角度2のドキュメントを使用して反応性フォームを把握しようとしています https://angular.io/docs/ts/latest/guide/reactive-forms.html。フォームをセットアップしようとしている方法は、チュートリアルでやっている方法とは少し異なりますが、同じ理論がまだ適用されています。行のどこかで、インポートされたデータを格納する変数がconsole.log()であるため、form groupも完全に正常にロギングされています。これまでのところ私のコードです。

質問モデル

export class Answers { 
    id  = ''; 
    name = ''; 
} 

export class QuestionModel { 
    question = ''; 
    id   = ''; 
    name  = ''; 
    answers  : Answers[]; 
} 



export const Question : QuestionModel[] = [ 
    { 
    question: 'How do you feel about your current image?', 
    id  : 'img-q1', 
    name : 'img-ques1', 
    answers : [ 
     { 
      id  : 'exp0101q', 
      answer : 'Its fine as is.' 
     }, 
     { 
      id  : 'exp0102q', 
      answer : 'I want to make minor adjustments.' 
     }, 
     { 
      id  : 'exp0103q', 
      answer : 'I want to change my image.' 
     }, 
     { 
      id  : 'exp0104q', 
      answer : 'Ive never wanted to use a particular image until now.' 
     } 
     ] 
    } 
] 

質問サービス

import { Injectable }    from '@angular/core'; 
import { Observable }    from 'rxjs/Observable'; 
import { of }      from 'rxjs/observable/of'; 
import 'rxjs/add/operator/delay'; 
import { QuestionModel, Answers, 
     Question }     from './question-model'; 



@Injectable() 

export class QuestionService { 

    getQuestions(): Observable<QuestionModel>{ 
     return of (Question); 
    } 
} 

質問コンポーネント

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

import { QuestionModel, Answers }  from './question-model'; 

import { QuestionService }    from './question.service'; 



@Component({ 
    moduleId : module.id, 
    selector : 'question-component', 
    //template : `<h1>question component</h1>`, 
    templateUrl : 'question.component.html', 
    providers : [ QuestionService ] 
}) 

export class QuestionComponent implements OnInit, OnChanges { 

    question: QuestionModel; 
    quesForm: FormGroup; 

    constructor(private qservice : QuestionService, private fbuild : FormBuilder) { 
     this.createForm(); 
    } 

    createForm() { 
     this.quesForm = this.fbuild.group({ 
      question: '', 
      id  : '', 
      name : '', 
      answers : this.fbuild.array([]) 
     }); 
    } 

    ngOnChanges(){ 
     this.quesForm.setValue({ 
      question: this.question.question, 
      id  : this.question.id, 
      name : this.question.name 
     }); 

     this.setAnswers(this.question.answers); 
    } 

    ngOnInit(){ 
     this.qservice.getQuestions().subscribe(Question => { 
      this.question = Question; 
     }); 

     console.log(this.question); 
     console.log(this.quesForm); 
    } 

    get answers(): FormArray { 
     return this.quesForm.get('answers') as FormArray; 
    }; 

    setAnswers(answers : Answers[]){ 
     const answersFGs = answers.map(answers => this.fbuild.group(answers)); 
     const answersFormArray= this.fbuild.array(answersFGs); 
     this.quesForm.setControl('answers', answersFormArray) 
    } 


} 

テンプレート

<h1>Question Component</h1> 

<form [formGroup]="quesForm" novalidate> 
    <fieldset [attr.id]="quesForm.value.id"> 

     <label>{{quesForm.value.question}}</label> 

     <!--<div formGroupName="answers"> 
       <div *ngFor="let ans of answers"> 
        <input type="radio" formControlName="name" 
        [attr.id]="ans.id" 
        [attr.value]="ans.answer" 
        /> 
       <label>{{ans.answer}}</label> 
      </div> 
     </div>--> 

    </fieldset> 




    <!--<input type="text" formControlName="name" /> 
    <label>{{quesForm | json}}</label>--> 

</form> 

<p>{{quesForm.value | json}}</p> 
<p>{{quesForm.status | json}}</p> 
<p>{{question | json}}</p> 

私が試した

唯一のことは、ngOnInitにこの

this.quesForm.setValue({ 
    question: this.question.question, 
    id  : this.question.id, 
    name : this.question.name 
}); 

this.setAnswers(this.question.answers); 

を動いていたが、私は予想通り、私はそれが前にそれを定義しようとしたためであるquestionに割り当てられた値、あることが必要であるというエラーを得ましたデータは実際にそこにありました。私はそれをngOnChangesに戻しました。そして、それは空に戻るように戻ります。彼らは、入力を更新するためにsubmitボタンや機能だけでなく、reset機能を設定しますが、私の知る限り、それらを理解することができるよとデータを設定し、それらの中には何も持っていないチュートリアルインサイド

。その外観からは、ngOnChangesのコードが値を設定するものだと思っていました。私は正しい？私はここで何が欠けていますか？

Answer 1

データからフォームを作成したいので、コンストラクタからフォームのビルドを削除し、データが取得されたらフォームを作成します。

このようにして、フォームを作成するための値があることを確認できます。したがって、空のフォームを作成するのをスキップして（必要がない場合）、入力する値でフォームを作成するだけです。したがって、OnChangesも削除することができます。

this.qservice.getQuestions().subscribe(Question => { 
     this.question = Question; 
     this.createForm(); // do this! 
    }); 

そして、あなたのcreateForm機能：データが取得された後

だからあなたのフォームを構築

createForm() { 
    this.quesForm = this.fbuild.group({ 
     question: this.question.question, 
     id  : this.question.id, 
     // ..... the rest 
    }); 
}