title: Why aren't any values loading into my Form Group?
body: <p>I'm trying to get a grasp on reactive forms using the Angular 2 documentation here
  <a href="https://angular.io/docs/ts/latest/guide/reactive-forms.html" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/guide/reactive-forms.html</a>.  The way I'm trying to set up my form is a little different from how they're doing it in the tutorial but the same theory still applies.  Somewhere along the line I'm getting something mixed up because the variable that stores the imported data is <code>console.log()</code>ing perfectly fine, the <code>form group</code> is also logging perfectly fine, just with empty values.  Here's my code so far.</p>
  
  <p>Question Model</p>
  
  <pre><code>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.'
          }
          ]
      }
  ]
  </code></pre>
  
  <p>Question Service</p>
  
  <pre><code>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&lt;QuestionModel&gt;{
          return of (Question);
      }
  }
  </code></pre>
  
  <p>Question Component</p>
  
  <pre><code>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  : `&lt;h1&gt;question component&lt;/h1&gt;`,
      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 =&gt; {
              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 =&gt; this.fbuild.group(answers));
          const answersFormArray= this.fbuild.array(answersFGs);
          this.quesForm.setControl('answers', answersFormArray)
      }
  
  
  }
  </code></pre>
  
  <p>The Template</p>
  
  <pre><code>&lt;h1&gt;Question Component&lt;/h1&gt;
  
  &lt;form [formGroup]="quesForm" novalidate&gt;
      &lt;fieldset [attr.id]="quesForm.value.id"&gt;
  
          &lt;label&gt;{{quesForm.value.question}}&lt;/label&gt;
  
          &lt;!--&lt;div formGroupName="answers"&gt;
                  &lt;div *ngFor="let ans of answers"&gt;
                      &lt;input type="radio" formControlName="name" 
                      [attr.id]="ans.id"
                      [attr.value]="ans.answer"
                      /&gt;
                  &lt;label&gt;{{ans.answer}}&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;--&gt;
  
      &lt;/fieldset&gt;
  
  
  
  
      &lt;!--&lt;input type="text" formControlName="name" /&gt;
      &lt;label&gt;{{quesForm | json}}&lt;/label&gt;--&gt;
  
  &lt;/form&gt;
  
  &lt;p&gt;{{quesForm.value | json}}&lt;/p&gt;
  &lt;p&gt;{{quesForm.status | json}}&lt;/p&gt;
  &lt;p&gt;{{question | json}}&lt;/p&gt;
  </code></pre>
  
  <p>The only thing I tried was moving this</p>
  
  <pre><code>this.quesForm.setValue({
      question: this.question.question,
      id      : this.question.id,
      name    : this.question.name
  });
  
  this.setAnswers(this.question.answers);
  </code></pre>
  
  <p>into the <code>ngOnInit</code> but as I expected, I got an error saying there needs the be a value assigned to <code>question</code>, which is because it attempted to define it before the data was actually there.  I moved it back into the <code>ngOnChanges</code> and it goes back to coming up empty.</p>
  
  <p>Inside the tutorial they set up a <code>submit</code> button and function as well as a <code>reset</code> function to update the input, but as far as I'm able to understand those don't have anything in them that sets the data.  From the looks of it I thought the code inside the <code>ngOnChanges</code> was what sets the values.  Am I right?  What am I missing here?</p>