2016-07-20 6 views
5

[angular2 RC4 + @ Winkel/forms module]angular2 form + Async-Validierung + ChangeDetectionStrategy.OnPush = keine Ansicht aktualisieren?

Ich habe eine Komponente OnPush Änderungsdetektion eine FormGroup enthält. Dieses Formular enthält einen FormControl mit einem async Validator.

Wenn die Validierung abgeschlossen ist (nicht mehr pending), wird die Ansicht nicht aktualisiert. Nur das input Blur-Ereignis macht Ansicht aktualisieren ..

Wenn ich die OnPush Änderungserkennung entfernen, funktioniert es ordnungsgemäß.

This plunker demonstrates it.

Ist es ein eckiger Fehler oder mache ich etwas falsch?

Antwort

5

Sieht aus wie Sie das Ziel der Verwendung von ChangeDetectionStrategy.OnPush vermissen.

Sie haben keine @Input-Eigenschaft oder | async Pipe auf Ihrer Komponente, aber es ist nur Punkt des Aktualisierens des Ansichtszustands mit dieser Strategie - wenn Input-Eigenschaft aktualisiert (in idealer Weise mit einem neuen Objekt). Deshalb sollte man nur loswerden es für aktuellen Fall

UPDATE

wenn Sie immer noch darauf bestehen, über die Verwendung OnPush in diesem Fall für die erwartete Verhalten sollten Sie Änderungserkennung manuell auslösen.

Fügen Sie import {..., ChangeDetectorRef} from '@angular/core'; hinzu und injizieren Sie eine Instanz davon in den Konstruktor.

In Ihrer Methode müssen Sie hinzufügen:

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

Mit 'OnPush', Ansicht Refresh ist auch ausgelöst werden, wenn Ereignisse innerhalb der Komponente wie ein Klick oder eine Eingabe Typisierung geschehen. Im Plocker wird die Ansicht aktualisiert, wenn Sie mit der Eingabe beginnen ("ausstehend" wird angezeigt). Und Synchronisierungsvalidatoren funktionieren gut .. also weiß ich nicht, ob ich es als normales Verhalten oder einen Fehler mit asynchronen Validatoren betrachten kann. – bertrandg

+0

Ok, wenn Sie also in diesem Fall darauf bestehen, OnPush zu verwenden, sollten Sie das erwartete Verhalten auslösen Ändern Sie die Erkennung manuell. Fügen Sie 'Import {..., ChangeDetectorRef} von' @ angular/core '; 'hinzu und injizieren Sie eine Instanz davon in den Konstruktor. In Ihrer Methode haben Sie diese hinzufügen: 'setTimeout (() => { resolve (null); this.changeRef.markForCheck();} , 500)' –

+1

Async Ausführung ruft nur Erkennungsänderung in 'OnPush' bei Verwendung mit' | async', was in diesem Fall nicht möglich ist. Ich denke auch, dass Sie die Änderungserkennung manuell aufrufen müssen. –

Verwandte Themen