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

Posted 2023-02-22

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

【英文标题】：Angular 2 dynamic forms example with ngmodel results in "expression has changed after it was checked"

【发布时间】：2017-06-17 15:32:35

【问题描述】：

我希望使用 Angular 文档中提供的 example 来结合 [(ngmodel)] 来利用动态表单。以便动态表单控件可以绑定到模型。

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

表达式在检查后发生了变化。以前的值：“假”。当前值：'true'。

Here 是一个带有更改的示例 Plunker。

我修改了 QuestionBase 类来保存一个键

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

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

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

在 DynamicFormQuestionComponent 中，模型作为输入变量传入

  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 用于模板驱动的表单，而不是动态响应式表单

很抱歉无法通过 plunkr.. 但是以下两个资源将有助于您对比如何做模板驱动与反应式的事情：* Angular 2 Forms Video | Kara Erickson, * Angular 2 Forms Repo | Kara Erickson, * NgModel, * FormControl.

感谢您的链接。我没有意识到你不能把两者混在一起。

【参考方案1】：

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

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

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

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

【参考方案2】：

如果您想使用ngModel，那么您还需要在该控件上设置名称：

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

我在您的示例 plunkr 中尝试了这个，它允许绑定回模型.. 但现在在绑定 *ngIf 到 isValid 时会引发一些其他错误。

简而言之，看起来你可以混合使用这两者.. 但是你有ngModel 和FormGroup.value 都捕获相同的数据，这很令人困惑。

我还没有发现需要尝试混合这些，如果您使用的是动态表单，请让它完成工作，然后在需要时获取值（保存/提交时）。如果你试图混合它们，你可能会自找麻烦