ngmodelを使用した角度2の動的フォームの例では、「式がチェックされた後に変更されました」

Question

Angularのドキュメントで提供されているexampleを使用して、[（ngmodel）]と組み合わせて動的フォームを活用したいと考えています。動的フォームコントロールをモデルにバインドすることができます。

私は[（ngMode）]にコントロールをバインドしようとすると、しかし、私はそれを確認した後

式が変更されたエラーメッセージを参照してください。以前の値： 'false'。現在の値： 'true'

Hereは、変更が加えられたサンプルのPlunkerです。

私はQuestionService内のキー

export class QuestionBase<T>{ 
     ... 
     modelKey:string; 
     ... 
} 

を保持するためにQuestionBaseクラスを変更し、それぞれの質問は今、モデルの名前を持っていることは、モデルが渡されDynamicFormQuestionComponentで

new TextboxQuestion({ 
      ... 
      modelKey: 'firstName' 
    }), 

を更新する必要がありますin入力変数として

export class DynamicFormQuestionComponent { 
     ... 
     @Input() model: SampleModel; 
     ... 
    } 

DynamicForm QuestionComponent HTMLフィールドが使用するように変更されている[（ngModel）]

<input *ngSwitchCase="'textbox'" [formControlName]="question.key" 
     [id]="question.key" [type]="question.type" [(ngModel)]="model[question.modelKey]"> 

ここ

コントロールにバインドする必要があります解決「モデル[question.modelKey]」

私は見ていないことを考えると[ （ngModel）]を参照してください。

ご協力いただければ幸いです。

ありがとうございました。

Answer 1

をミックスしようとすると、

双方向-バウンド..私はただ将来的に他人のためにここにこれを残しておきます。..トラブルを求めてされる可能性がありますngModelは動的反応型よりもむしろ のテンプレート駆動型用に設計されています。

• Angular 2 Forms Video | Kara Erickson
• Angular 2 Forms Repo | Kara Erickson
• NgModel
：

次のリソースは、あなたが もの「をダイナミックに反応」道対「テンプレート駆動型」の方法を行う方法を対比支援するために有用であろう

• FormControl

Answer 2

あなたがngModelを使用したい場合、あなたはまた、そのコントロールに名前を設定する必要があります。

[(ngModel)]="model[question.modelKey]" [name]="question.key"

つまり私はあなたのサンプルplunkrでこれを試みたが、それが戻ってモデルに結合できます。..バインドにいくつかの他のエラーを投げます。*ngIf〜isValid。要するに

あなたはは 2を混在させることができます..しかし、あなたはngModelとFormGroup.value両方かなり混乱して同じデータをキャプチャを持っているように、それが見えます。

動的フォームを使用して作業を行い、必要なときに値を取得できるようにする（保存/送信時に）、これらを混ぜてみる必要はありませんでした。あなたは彼らに、私はあなたがそれが役に立ったと評価してくれてうれしい