Angular2結合動態文本框

我有這個Angular2結合動態文本框

<ul> 
<li *ngFor="let data of list"> 
    //here bind a textbox to the id and get its value so something like 

    <input type="text" /> //am stuck 
</li>

export class App { 
textboxvalues:any[] = []; 

list= [{ 
    id: 1, 
    value: 'One' 
    }, 
    { 
    id: 2, 
    value: 'Two' 
    }]; 
}

我怎樣才能在價值和文本框的ID綁定，這樣當我收集的

console.log(textboxvalue)

值它提供{id，值}例如

{1:"textbox1", 2:"textbox2"}

甚至爲對象

{1, "textbox1"}, {2, "textbox2"}

來源

2017-08-11 GEOFFREY MWANGI

[FormArray]（https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups）[反應性表格]（HTTPS的：// angular.io/guide/reactive-forms#reactive-forms）可能是最好的選擇 –

你有沒有試過如下：

<li *ngFor="let data of list;"> 
     <input type="text" [(ngModel)]="data.value"/> 
    </li>

的[（ngModel）建立了雙向綁定，所以，當你在文本框中更改值數組中的對象也會更新。不要忘了導入FormsModule。

這裏是一個example on plunker。你需要的一切都在app.ts.您將看到，當您更改第一個列表中的文本框時，只讀列表也會更新。

希望這會有所幫助。

來源

2017-08-11 22:04:01

會這樣的工作？

<li *ngFor="let data of list"> 
    <input type="text" name={{data.id}} [(ngModel)]="data.value" /> 
</li>

這導致的form.value：

{ "1": "One", "2": "Two" }

如果你需要從一個屬性讀取和寫入到另一個，你可以改爲試試這個（但我沒有語法檢查）。請注意，它不會得到默認值。它只會被設置爲更改的值。

<li *ngFor="let data of list; let i = index"> 
    <input type="text" name={{data.id}} [ngModel]="data.value" 
      (ngModelChange)="textboxvalues[i]=$event /> 
</li>

來源

2017-08-11 22:16:48 DeborahK

我如何直接值傳遞給textboxvalues，我可以看到你的綁定是data.value –

放置代碼的提交按鈕拍攝yourForm .value並將值寫入數組。 – DeborahK

Angular2結合動態文本框

回答

相關問題