Question

处理我想要生成的更新表单并捕获可变大小数组的输入

当前不满意版本仅支持选区数组中前三个静态定义的元素。所以输入看起来像这样......

  <input #newConstituency1 class="form-control" value={{legislatorToDisplay?.constituency[0]}}>
  <input #newConstituency2 class="form-control" value={{legislatorToDisplay?.constituency[1]}}>
  <input #newConstituency3 class="form-control" value={{legislatorToDisplay?.constituency[2]}}>

并且要更新的函数使用静态octothorpe标记拉取表单的值。

updateLegislator(newConstituency1.value,  newConstituency2.value,  newConstituency3.value)

但这并不允许使用可变大小的选区数组。

我可以使用*ngFor指令为理论上无限大小的选区数组动态创建输入字段：

<div *ngfor constit of legislatorToDisplay?.constituency>
  <input value={{constit}}>
</div>

但之后未能成功捕获该信息。非常感谢任何形式的帮助。

Answer 1

使用双向数据绑定：

<div *ngFor="constit of legislatorToDisplay?.constituency; let i = index">
  <input [(ngModel)]="legislatorToDisplay?.constituency[i]">
</div>

Answer 2

组件中必须有一个与创建的HTML输入组件匹配的表单对象。

<强>模板

<div *ngfor constit of legislatorToDisplay?.constituency>
  <input value={{constit}} formControlName="{{constit}}">
</div>

<强>组件

/* create an empty form then loop through values and add control
  fb is a FormBuilder object. */
let form = this.fb.group({});
for(let const of legislatorToDisplay.constituency) {
     form.addControl(new FormControl(const))
}

angular2捕获来自动态生成输入的信息 - 可能吗？

2 个答案: