Angular2 form + asynchronous validation + ChangeDetectionStrategy.OnPush = no view update?

Question

[angular2 RC4 + @ angular / forms module]

I have a component using OnPush change detection containing a FormGroup . This form contains FormControl with the async validator.

When the check is completed (no more pending ), the view is not updated. Only the input blur event allows you to refresh the view.

If I delete OnPush change detection, it works correctly.

This plunker demonstrates this .

Is this an angular bug or am I doing something wrong?

Answer 1

It looks like you are missing the purpose of using ChangeDetectionStrategy.OnPush .

You do not have any @Input or | async | async on your component, but this is only the point of updating the state of the view using this strategy - when changing the input property (ideally with a new object). So just get rid of this for the current case.

UPDATE

if you still insist on using OnPush in this case, you must trigger change detection manually for the expected behavior.

Add import {..., ChangeDetectorRef} from '@angular/core'; and add it to the constructor.

In your method you should add this:

  uniqueNameAsync(control: FormControl): Promise<{[key: string]:any}>{ return new Promise(resolve => { setTimeout(() =>{ resolve(null); this.changeRef.markForCheck(); }, 500); }); }