带有 ngmodel 的 Angular 2 动态表单示例导致“表达式在检查后已更改”

我正在寻找使用这个example https://angular.io/docs/ts/latest/cookbook/dynamic-form.htmlAngular 文档中提供了与 [(ngmodel)] 结合使用动态表单的功能。以便动态表单控件可以绑定到模型。

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

检查后表情发生了变化。先前值：“假”。当前值：“真”。

Here https://plnkr.co/edit/3hpld2nUTIVgzhHbscaY?p=preview是一个经过更改的 Plunker 示例。

我修改了 QuestionBase 类来保存密钥

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

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

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

在动态表单问题组件中，模型作为输入变量传入

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

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

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

这里的控件应该绑定到已解析的“model[question.modelKey]”

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

如有任何帮助，我们将不胜感激。

非常感谢你。

我很高兴你发现它有帮助..我将来会把它留在这里给其他人..

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

以下资源将有助于帮助您对比如何做 “模板驱动”方式与“动态反应”方式的区别：

• Angular 2 形式视频 |卡拉埃里克森 https://www.youtube.com/watch?v=xYv9lsrV0s4
• Angular 2 Forms 仓库 |卡拉埃里克森 https://github.com/kara/ac-forms
• NgModel https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html
• 表单控件 https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html