Angular 2 automatisches Ausfüllen

Question

Eine Angular 2-Form mit drei hierarchischen Feldern, die meistens die gleichen Werte haben sollten, aber manchmal nicht. Um die Dateneingabe zu beschleunigen, möchte ich, dass die drei Feldinhalte mit nachfolgenden Feldern synchronisiert werden, bis eine Änderung an einem Feld vorgenommen wird.

Zum Beispiel Wenn ich „Äpfel“ im ersten Feld eingeben, sollten die Feldwerte sein:

apples 
apples 
apples 

und wenn ich weiterhin auf das zweite Feld der Tabulatortaste und geben Sie , pears, die Feldwerte sein sollte (dh das dritte Feld noch die zweite Tracking):

apples 
apples, pears 
apples, pears 

und wenn ich weiterhin auf das dritte Feld der Tabulatortaste und geben Sie , and oranges, s die Feldwerte hould sein:

apples 
apples, pears 
apples, pears, and oranges 

und wenn ich weiter mit dem Shift-Tab zurück zu dem zweiten Feld und geben , and strawberries sollten die Feldwerte sein:

apples 
apples, pears, and strawberries 
apples, pears, and oranges 

ich nicht auf die Registerkarte in die Felder haben sollte für eine Einreichung, um erfolgreich zu sein. Wenn ich in dem ersten Szenario oben mit apples in allen Feldern gebe, sollten die drei Felder apples übermitteln.

Das ist offensichtlich nicht nicht:

<input [(ngModel)]="one"> 
<input [(ngModel)]="two" value="{{one}}"> 
<input [(ngModel)]="three" value="{{two}}"> 

zum Strom der Ereignisse hören von einem ControlGroup vielversprechend scheint:

this.form.valueChanges 
    .subscribe(
    v => { 
     console.log("change: ", JSON.stringify(v)); 
    } 
); 

aber die Abbildung könnte eine Menge Code sein. Here's plnkr which doesnt' work, yet, along these line.

Gibt es einen sauberen Weg in Angular 2, um dies zu erreichen?

Answer 1

nicht sicher, ob ich vollständig verstanden Ihre Frage, aber ich denke, das sollte das tun, was Sie wollen:

<input [(ngModel)]="one" #ione (blur)="itwo.value ? null : itwo.value = 'two'"> 
<input [(ngModel)]="two" #itwo (blur)="ithree.value ? null : ithree.value = 'three'"> 
<input [(ngModel)]="three" #ithree value="{{three}}"> 

Plunker example