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结合动态文本框

回答

相关问题