ngModel无法正确检测到数组更改

梅加索夫

组件模型:

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示例(问题在于带有模板标签的模板的封闭)。

对这种行为有任何想法吗?

yurzui

发生这种情况的原因是删除某些项目时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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章