首页 文章

使用ngmodel的Angular 2动态表单示例“表达式在检查后已更改”

提问于
浏览 次
0

我希望使用Angular文档中提供的example来将动态表单与[（ngmodel）]结合使用 . 这样动态表单控件就可以绑定到模型上 .

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

检查后表情发生了变化 . 上一个值：'false' . 当前值：'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）] .

任何帮助表示赞赏 .

非常感谢你 .

angular angular2-forms

2 回答

  • 0

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

    双向绑定ngModel是为模板驱动的表单而不是动态反应形式而设计的 . 以下资源将有助于您对比如何以“模板驱动”方式与“动态反应”方式进行对比：Angular 2 Forms Video | Kara Erickson Angular 2形式回购| Kara Erickson NgModel FormControl

    回复于
  • 1

    如果要使用 ngModel ，则还需要在该控件上设置名称：

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

    我在你的示例plunkr中尝试了这个，它允许绑定回模型..但是现在在绑定 *ngIf 上抛出一些其他错误到 isValid .

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

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

    回复于

相关问题