Skip to content

NgModel works incorrectly when using onPush ChangeDetection strategy #10816

@kkovalevskiy

Description

@kkovalevskiy

I'm submitting a ...

[x] bug report - related issue https://github.com/angular/angular/issues/10148, but it's about testing.

Current behavior
I have two components: the first one is a simple child component with some input and basic support of [ngModel] directive via ControlValueAccesor interface. The second one is a parent component has onPush change detection strategy and populates a value into child component via [ngModel] directive (right after that it's marked for changes via ChangeDetectorRef class). When [ngModel] is updated child component still displays an old value in the template while the component object has actual value in target property.

As I can see NgModel directive updates target component asynchronously - https://github.com/angular/angular/blob/2.0.0/modules/%40angular/forms/src/directives/ng_model.ts#L191-L193 so the following scenario occurs

  1. Change detection executes for parent component.
  2. Change detection updates [ngModel] value
  3. [ngModel] schedules async task that updates child component
  4. Change detection executes for child component
  5. Actual value arrives in child component.

Expected/desired behavior
Change detection should work with already updated component to ensure that new value has been populated into UI.

So it looks like that last two steps should be swapped (or even better - [ngModel] can update child component synchronously).

Reproduction of the problem
Here is a tiny example with the issue. I'm expecting here that right after 2 seconds App Component should display "new value".
http://plnkr.co/edit/IabIsT3323GpZmQSPd4z?p=preview
new example can be found here http://plnkr.co/edit/KowgH96EtDbVJao13Hz5?p=preview, thanks to @andreialecu

if I use the following markup in the example above
<my-child [value]="value"></my-child>
instead of
<my-child [ngModel]="value"></my-child>
all work as expected

Please tell us about your environment:

  • Angular version: 2.0.0-rc.05
  • Browser: [ Chrome 52]
  • Language: [TypeScript 1.8 | ES5]

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions