Angular 2自動填充

Angular 2形式包含三個分層字段，大部分時間應該具有相同的值，但有時不會。爲了加速數據輸入，我希望將三個字段內容同步到後續字段，直到對字段進行修改。Angular 2自動填充

例如如果鍵入在第一字段「蘋果」，則字段值應當是：

apples 
apples 
apples

，如果我繼續通過互聯到所述第二場並鍵入, pears，字段值應（即，第三個字段是仍有跟蹤第二）：

apples 
apples, pears 
apples, pears

，如果我繼續通過互聯到第三場和鍵入, and oranges，字段數值• HOULD是：

apples 
apples, pears 
apples, pears, and oranges

，如果我繼續通過換檔Tab鍵回到第二字段和類型, and strawberries，字段值應當是：

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

我不應該標籤到田間申請成功。如果我在上面的第一個場景中輸入所有字段，則這三個字段應提交。

這顯然不起作用：

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

監聽事件的從ControlGroup流很有前途：

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

但映射可能是大量的代碼。 Here's plnkr which doesnt' work, yet, along these line.

在Angular 2中有一個乾淨的方法來實現這一目標嗎？

來源

2016-04-28 Jan Nielsen

不知道我完全理解你的問題，但我認爲這應該做你想要什麼：

<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

來源

2016-04-28 16:27:08

[「不能重新分配一個變量綁定一個」（https：//開頭plnkr。 co/edit/KpwqHvi5z8zzFgk92XV5？p =預覽） –

對不起，名稱有衝突。我更新了我的答案。 –

[This plnkr]（https://plnkr.co/edit/KpwqHvi5z8zzFgk92XV5?p=preview）更接近，但3在2中進行更改時未更新。 –

Angular 2自動填充

回答

相關問題