Angular 2 dynamic forms example with ngmodel results in "expression has changed after it was checked"

Question

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.

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

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

Here is an sample Plunker with the changes made.

I modified the QuestionBase class to hold a key

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

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

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

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

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

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]">

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

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

Any assistance is appreciated.

Thank you kindly.

Answer 1

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

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:

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

Answer 2

If you want to use ngModel then you also need to set the name on that control:

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

I tried this in your sample plunkr, and it allows binding back to the model .. but now throws some other errors on the binding *ngIf to isValid.

In short, it looks like you can mix the two .. but then you have ngModel and FormGroup.value both capturing the same data which is quite confusing.

I haven't found the need to try to mix these, if you're using a dynamic form let it do the work and then get the values when you need them (on save/submit). You might be asking for trouble if you try to mix them