Warum werden keine Werte in meine Formulargruppe geladen?

Question

Ich versuche, Reactive Forms mit der Angular 2 Dokumentation hier zu begreifen. Die Art und Weise, wie ich mein Formular aufstelle, unterscheidet sich etwas von der Vorgehensweise im Tutorial, aber die gleiche Theorie gilt immer noch. Irgendwo auf der Linie bekomme ich etwas durcheinander, weil die Variable, die die importierten Daten speichert, console.log() in Ordnung ist, die form group protokolliert auch vollkommen gut, nur mit leeren Werten. Hier ist mein Code soweit.

Frage Modell

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.' 
     } 
     ] 
    } 
] 

Frage Dienst

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

Frage Komponente

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


} 

Die Vorlage

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

Das ich nur noch versucht wurde, dieses bewegende

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

this.setAnswers(this.question.answers); 

in die ngOnInit aber als ich erwartet hatte, bekam ich eine Fehlermeldung, da die zu question, zugewiesen ein Wert muss sein, das ist, weil sie es vor dem zu definieren versucht Daten waren tatsächlich da. Ich zog es zurück in die ngOnChanges und es geht wieder leer zu kommen.

Innerhalb des Tutorials eingerichtet sie eine submit Schaltfläche und Funktion sowie eine reset Funktion, um die Eingabe zu aktualisieren, aber soweit ich in der Lage zu verstehen, haben diejenigen nichts in ihnen, die die Daten setzt. Von den Anblicken dachte ich, dass der Code innerhalb der ngOnChanges war, was die Werte setzt. Habe ich recht? Was fehlt mir hier?

Answer 1

Da Sie Ihr Formular aus Daten auffüllen möchten, würde ich den Build des Formulars aus dem Konstruktor entfernen und das Formular erstellen, wenn die Daten abgerufen wurden.

Auf diese Weise können wir sicherstellen, dass wir Werte haben, um das Formular zu erstellen. Sie können also das leere Formular überspringen (wenn Sie es nicht benötigen) und einfach das Formular mit Ihren eingehenden Werten erstellen. So kann auch die OnChanges entfernt werden.

bauen So Ihre Form, nachdem die Daten abgerufen wurden:

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

Und Ihre createForm Funktion:

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