title: Angular 2 / PrimeNG - Expression has changed after it was checked. Binding NgModel on last invalid form control
body: <p>I'm having a problem where when the very last element in my form has a value bound to it the error "Expression has changed after it was checked." is thrown.</p>
  
  <p>I will preface by saying this is based off of the Angular 2 website example here - 
  <a href="https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#top" rel="nofollow noreferrer">https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#top</a></p>
  
  <p>The way my app works is first I build a dynamic form with controls in my form component based off a model.</p>
  
  <p>My form components html loops the questions in the model like so</p>
  
  <pre><code>&lt;form *ngIf="showForm" [formGroup]="formGroup"&gt;
      &lt;!-- questions--&gt;
      &lt;div *ngIf="questions.length &gt; 0"&gt;
          &lt;div *ngFor="let question of questions"&gt;
              &lt;question [question]="question" [formGroup]="formGroup"&gt;&lt;/question&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;button pButton type="submit" label="Submit" icon="fa-check-circle-o" iconPos="left"
              [disabled]="!formGroup.valid" (click)="submitFinalForm()"&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Below is the question component html that uses the data that was passed in from the form component to display certain types of questions via ngSwitch</p>
  
  <pre><code>&lt;label [attr.for]="question.field"&gt;
      {{ question.question }}
  &lt;/label&gt;
  &lt;div [ngSwitch]="question.type"&gt;
      &lt;!-- Radio / Checkbox --&gt;
      &lt;radio-checkbox-question *ngSwitchCase="1" [formGroup]="formGroup" [question]="question"&gt;&lt;/radio-checkbox-question&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally here is the radio-checkbox-question component</p>
  
  <pre><code>&lt;div *ngIf="showQuestion" [formGroup]="formGroup"&gt;
      &lt;!-- Radio --&gt;
      &lt;div *ngIf="model.radiocheckbox == 'radio'"&gt;
          &lt;div *ngFor="let label of model.labels; let i = index;"&gt;
               &lt;p-radioButton name="{{model.field}}"
                              value="{{i}}"
                              label="{{label}}"
                              formControlName="{{model.field}}"
                              [(ngModel)]="questionAnswerRadio"&gt;&lt;/p-radioButton&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the actual component TS</p>
  
  <pre><code>import { Component, Input, OnInit }         from "@angular/core";
  import { FormGroup }                        from "@angular/forms";
  
  import { RadioCheckboxQuestion }            from "../Questions/radio.checkbox.question.model";
  
  @Component({
      selector: "radio-checkbox-question",
      templateUrl: "radio.checkbox.component.html"
  })
  export class RadioCheckboxComponent implements OnInit {
  
      @Input() question: any;
      @Input() formGroup: FormGroup;
  
      model: RadioCheckboxQuestion = new RadioCheckboxQuestion();
      showQuestion: boolean = false;
  
      questionAnswerRadio: string = "";
  
      ngOnInit(): void {
          // question essential properties
          if (this.question.hasOwnProperty("field") &amp;&amp; this.question["field"] &amp;&amp;
              this.question.hasOwnProperty("labels") &amp;&amp; this.question["labels"]) {
              this.model.field = this.question["field"];
              this.model.labels = this.question["labels"];
  
              // assume always radio for debugging
              this.model.radiocheckbox = "radio";
  
              // set existing answer
              if (this.question.hasOwnProperty("QuestionAnswer") &amp;&amp; this.question["QuestionAnswer"]) {
                  if (this.model.radiocheckbox == "radio") {
                      this.questionAnswerRadio = this.question["QuestionAnswer"];
                  }
              }
  
              this.showQuestion = true;
          }
      }
  }
  </code></pre>
  
  <p>I've also seen many SO issues like the following
  <a href="https://stackoverflow.com/questions/41970421/angular-2-dynamic-forms-example-with-ngmodel-results-in-expression-has-changed">Angular 2 dynamic forms example with ngmodel results in &quot;expression has changed after it was checked&quot;</a> which basically state that [(ngModel)] should not be used with dynamic forms, but the primeNG documentation says the components can work with model driven forms and the only way to set the answer (that I know of) is [(ngModel)]. I believe what might happen here is since I set the only question in the formGroup to a value that the formGroup becomes valid in between the change detection and causes the error </p>
  
  <p><code>Error in ./FormComponent class FormComponent - inline template:17:48 caused by: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
  </code></p>