用 angular 5 中的数组发送输入

Question

在正常情况下 html 我们可以这样做：

<input name="xyz[]" value="Lorem" />
<input name="xyz[]" value="ipsum"  />
<input name="xyz[]" value="dolor" />
<input name="xyz[]" value="sit" />
<input name="xyz[]" value="amet" />

结果是数组发送到服务器。
我怎样才能在 angular 5 中做到这一点？

它的工作方式不同，在 ngModel 中也不工作。

Answer 1

我没用过，你不能用索引吗？

<input type="text" [(ngModel)]="xyz[0]" />
<input type="text" [(ngModel)]="xyz[1]" />
<input type="text" [(ngModel)]="xyz[2]" />
<input type="text" [(ngModel)]="xyz[3]" />

我在这个github's issue看到过。

Answer 2

由于您的数组有长度，您可以使用带有 FormArray 的反应形式，或使用模板驱动形式。既然你说使用后一种，那么你应该怎么做：

<ng-container *ngFor="let item of xyz; let i = index; trackBy: myCustomTrackBy">
  <input type="text" [(ngModel)]="xyz[i]">
</ng-container>

在你的打字稿中：

myCustomTrackBy(index, item) { return index; }

Answer 3

我使用了 angular Form Group，这是解决这个问题的方法：

<div ngModelGroup="xyz">
    <input name="1" ngModel />
    <input name="2" ngModel />
    <input name="3" ngModel />
</div>

用 angular 5 中的数组发送输入

Send input with array in angular 5

forms

input

typescript

angular

angular5