带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改". [英] Angular 2 dynamic forms example with ngmodel results in "expression has changed after it was checked"

问题描述

我正在使用提供的示例在Angular文档中结合[[ngmodel)]来利用动态表单.以便可以将动态表单控件绑定到模型.

I'm looking to use this example provided in the Angular documentation to leverage Dynamic forms in combination with the [(ngmodel)]. so that dynamic form controls can be bound to an model.

但是，当我尝试将控件绑定到[[ngMode)]时，会看到错误消息

However, when I try to bind a control to [(ngMode)], I see the error message

表达已被检查后更改.先前的值:"false".当前值:"true".

Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

此处是经过更改的示例Plunker.

Here is an sample Plunker with the changes made.

我修改了QuestionBase类以保留键

I modified the QuestionBase class to hold a key

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

在QuestionService中，每个问题现在都有它应该更新的模型的名称

Within the QuestionService, each question now has the name of the model it should update

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

在DynamicFormQuestionComponent中，将模型作为输入变量传递进来

In the DynamicFormQuestionComponent the model is passed in as an input varialbe

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

DynamicFormQuestionComponent HTML字段已修改为使用[(ngModel)]

The DynamicFormQuestionComponent HTML fields have been modified to use [(ngModel)]

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

此处控件应绑定到已解析的'model [question.modelKey]'

Here the control should be bound to the the resolved 'model[question.modelKey]'

鉴于我没有看到官方文档中提供的示例中使用的[[ngModel)].

Given that I don't see [(ngModel)] used in the example provided in the official documentation.

我们将为您提供任何帮助.

Any assistance is appreciated.

谢谢.

推荐答案

很高兴您发现它有用.

I'm glad you found it helpful.. I'll just leave this here for others in future..

双向绑定ngModel专为模板驱动的表单而设计 而不是动态反应形式.

Two-way-bound ngModel is designed for template driven forms rather than the dynamic reactive forms.

以下资源将有助于您对比如何做 事物采用模板驱动"方式与动态反应"方式:

The following resources will be useful to help you contrast how to do things the "template driven" way vs the "dynamic reactive" way:

• 角度2表单视频|卡拉·埃里克森(Kara Erickson)
• Angular 2 Forms回购|卡拉·埃里克森(Kara Erickson)
• NgModel
• FormControl

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

这篇关于带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！