带有ngFor元素的ngModel的动态angular2形式
拉斐尔·吉尔（Rafael Gil）
我正在尝试创建连接到ngModel的动态表单，该表单允许用户根据需要添加更多控件。就像下面的图片一样：
该窗体的行为与预期的一样，除了添加新的控件集外，因为它会删除先前输入的内容。即使模型没有更改。我创建了这个plunkr，以演示我正在谈论的行为。
这是我写的html模板：
<tr *ngFor="let work of works; let i = index">
<td>
<select required id="cliente" class="form-control" [(ngModel)]="work.operation" name="operation">
<option>Operation 1</option>
<option >Operation 2</option>
</select>
</td>
<td>
<input required type="number" class="form-control" [(ngModel)]="work.cost"
name="cost">
</td>
<td>
<input required id="horas_maquina_previstas" type="number" class="form-control" [(ngModel)]="work.hours"
name="hours">
</td>
<td>
<button type="button" class="btn btn-danger btn-circle" (click)="removeWork(i)">Remove</button>
</td>
</tr>和打字稿组件定义：
import {Component, ChangeDetectionStrategy} from '@angular/core'
@Component({
selector: 'my-app',
templateUrl: 'src/app.html'
})
export class App {
works = [];
addWork(){
this.works.push({});
}
removeWork(index){
this.works.splice(index, 1);
}
get diagnostic() {
return JSON.stringify(this.works);
}
}
我无法理解这种行为，我发现的所有相关问题都是关于较旧版本的angular的，而且都没有类似的问题。
步伐
您的控件需要唯一的名称才能在Angular2中正常工作。因此，请执行以下操作：
<td>
<input required type="number" class="form-control" [(ngModel)]="work.cost"
name="cost-{{i}}">
</td>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Angular2不能以ngFor重复的形式使用ngModel
- 2
Angular2 ngModel针对ngFor变量
- 3
ngFor内的Angular2 ngModel
- 4
如何在Angular2中使用* ngFor动态生成ngModel？
- 5
带* ngFor的angular2动态表单，双向绑定[（ngModel）]和表单验证
- 6
Angular2中带有ngFor的ngControl
- 7
Angular2：<li>带有* ngFor不在<ul>内
- 8
带有* ngFor的Angular2奇怪的表单行为
- 9
Angular2 - 带有多个复选框的 NgFor
- 10
ngfor中的angular2形式
- 11
带有AngularFire和Angular2的动态加载页面
- 12
带有索引的Angular2动态组件
- 13
Angular2 ngFor父元素
- 14
Angular2中的分组元素* ngFor
- 15
angular2 ngfor 子组件元素
- 16
在带有Angular2的NativeScript中获取元素值
- 17
Angular2：[（ngModel）]带有离子选择-根据选择值显示div
- 18
带有ngmodel的Angular 2动态表单示例导致“检查后表达式已更改”
- 19
Angular2动态添加的元素
- 20
Angular 2 *带有当前元素的ngFor onClick（）调用函数
- 21
Angular2获取对在ngFor中创建的元素的引用
- 22
无法在ngFor Angular2内部的元素上调用函数
- 23
带有Angular2的materialize-css中的多选未呈现动态值
- 24
Angular2 http获取带有Observables和动态url参数的请求。如何？
- 25
带有参数的Angular2 DynamicComponentLoader
- 26
angular2：带有模板的服务？
- 27
带有Angular2的非SPA
- 28
带有 Angular2 图像的 Ngif
- 29
ngFor中的Angular ngModel，带有管道和地图，不起作用
我来说两句