角2/PrimeNG - 式がチェックされた後に変更されました。最後の無効なフォームコントロールにNgModelをバインドする

Question

フォームの最後の要素に値がバインドされているときに、「式がチェックされた後に式が変更されました」というエラーが発生します。スローされます。

私は、これはここでは角度2ウェブサイトの例をベースにしていますと言って序文う - https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#top

私のアプリが動作する方法は、私がモデルをオフに基づいて自分のフォームコンポーネントのコントロールとダイナミックなフォームを構築する最初のです。

マイフォームコンポーネントのHTMLは以下ので

<form *ngIf="showForm" [formGroup]="formGroup"> 
    <!-- questions--> 
    <div *ngIf="questions.length > 0"> 
     <div *ngFor="let question of questions"> 
      <question [question]="question" [formGroup]="formGroup"></question> 
     </div> 
    </div> 
    <button pButton type="submit" label="Submit" icon="fa-check-circle-o" iconPos="left" 
      [disabled]="!formGroup.valid" (click)="submitFinalForm()"></button> 
</form> 

のようなモデルで質問にループがngSwitch

経由質問の特定の種類を表示するには、フォームのコンポーネントから渡されたデータを使用して質問・コンポーネントのhtmlです最後に、ここで

<label [attr.for]="question.field"> 
    {{ question.question }} 
</label> 
<div [ngSwitch]="question.type"> 
    <!-- Radio/Checkbox --> 
    <radio-checkbox-question *ngSwitchCase="1" [formGroup]="formGroup" [question]="question"></radio-checkbox-question> 
</div> 

無線のチェックボックス - 質問・コンポーネント

<div *ngIf="showQuestion" [formGroup]="formGroup"> 
    <!-- Radio --> 
    <div *ngIf="model.radiocheckbox == 'radio'"> 
     <div *ngFor="let label of model.labels; let i = index;"> 
      <p-radioButton name="{{model.field}}" 
          value="{{i}}" 
          label="{{label}}" 
          formControlName="{{model.field}}" 
          [(ngModel)]="questionAnswerRadio"></p-radioButton> 
     </div> 
    </div> 
</div> 

ですここ

は私も基本的には[（ngModel）]は動的なフォームを使用すべきではありませんが、primeNGのドキュメントが言うことを述べる以下の Angular 2 dynamic forms example with ngmodel results in "expression has changed after it was checked"ようなので、多くの問題を見てきました実際のコンポーネントTS

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") && this.question["field"] && 
      this.question.hasOwnProperty("labels") && 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") && this.question["QuestionAnswer"]) { 
       if (this.model.radiocheckbox == "radio") { 
        this.questionAnswerRadio = this.question["QuestionAnswer"]; 
       } 
      } 

      this.showQuestion = true; 
     } 
    } 
} 

ですコンポーネントはモデル駆動型で動作することができ、答えを設定する唯一の方法は[（ngModel）]です。私は何をここに起こるかもしれないことは私が見つけた唯一の方法私はformGroupは、変化検出の間に有効になる値にformGroupで唯一の質問を設定するので、あるとエラーに

Error in ./FormComponent class FormComponent - inline template:17:48 caused by: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

Answer 1

の原因となると考えています複数のネストされたコンポーネントに満足するように変更検出を取得し、primeNGは完全な変更検出を手動で実装することでした。何それは基本的に意味することは、私はこの少ないし、次の

import ChangeDetectorRef 

constructor(private change: ChangeDetectorRef) 
{} 

ngOnInit() { 

    // code here that inits everything 
    this.change.markForCheck(); 
} 

何かのようなものを追加する必要がありましたすべてのコンポーネントにあった変化検出エラーが-POPアップprimeNGを使用される部品の異なるユニークな方法でさせ。

Answer 2

テンプレートからは、モデルドライブ（formControlName） とテンプレート駆動型（ngModel）の両方を使用しているようです。

<p-radioButton name="{{model.field}}" 
          value="{{i}}" 
          label="{{label}}" 
          formControlName="{{model.field}}" 
          [(ngModel)]="questionAnswerRadio"></p- 
    <radioButton> 

一方的な方法を選択してもう一度お試しください。 [（ngModel）]を削除することをおすすめします