组件模型:
private SomeArray = [{ key: "Initial" }];
用户可以动态添加/删除项目:
addField() {
this.SomeArray.push({ key: Math.random().toString() });
}
removeField(index: number) {
this.SomeArray.splice(index, 1);
}
模板标记:
<div class="col-xs-12">
<button (click)="addField()" type="button">Add</button>
</div>
<div *ngFor="let field of SomeArray; let i = index;">
<input [(ngModel)]="field.key" #modelField="ngModel" [name]=" 'SomeArray['+i+'].key' " type="text" class="form-control" required />
<div [hidden]="modelField.pristine || !(modelField.errors && modelField.errors.required)" class="alert alert-danger">
Required error
</div>
<button (click)="removeField(i)" class="btn btn-danger">Remove</button>
</div>
在用户从中删除任何项目之前,此方法一直有效SomeArray
。如果我最初添加一些两项:
并删除索引为1的索引:
然后在添加另一个项目Angular之后,将其视为项目同时具有0和1的索引(新项目“占用”两个输入):
(不显示键为0.1345 ...的项目)
值得注意的SomeArray
是预期的项目,但是数据绑定失败。可能是什么原因呢?
更新:感谢@Stefan Svrkota和@ AJT_82的评论,据我所知,可以通过添加[ngModelOptions]="{standalone: true}"
所需的输入来解决问题。但是,如果不设置standalone
选项,我就无法停止考虑问题的原因(每个名称属性都有唯一的值,因此这里没有什么错)。
最终,我发现<form>
仅当输入元素仅位于标签中时才会发生行为-这里有Plunker示例(问题在于带有模板标签的模板的封闭)。
对这种行为有任何想法吗?
发生这种情况的原因是删除某些项目时ngFor
混合name
属性。
当您ngModel
在内部使用form
每个ngModel
控件时,都会将其添加到表单控件集合中。
让我们看看如果我们添加了三个项目并单击Remove
了第二个项目会发生什么
1)步骤1-SomeArray[1].key
存在于集合中controls
2)步骤2-SomeArray[1].key
已从controls
收藏夹中删除
3)Step3-HTML看起来像
4)Step4我们要添加一个新项目
因此formGroup
返回现有项目。
我们如何解决呢?
1)不要将控件包装在form
标记中
2)添加ngNoForm
属性到表单
<form ngNoForm>
3)使用
[ngModelOptions]="{standalone: true}
通过以上所有三个解决方案:
我们可以删除[name]
属性绑定
我们无法使用内置的表单组验证
4) 将trackBy用于ngFor
template.html
<div *ngFor="let field of SomeArray; let i = index; trackBy: trackByFn">
component.ts
trackByFn(i: number) {
return i;
}
这样我们的内置表单将正常工作
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句