当 adding/removing 个元素来自数组时，表单有效性不一致

Question

看到这个 Plunker：https://plnkr.co/edit/rnydqGw9nxbR61Dut4yS?p=preview

我有一个这样的模板：

<form #editorForm="ngForm">
    <button (click)="addField()">add</button>
    <ul>
      <li *ngFor="let field of fields; let index=index">
        <input type="text" required name="field-{{index}}" [(ngModel)]="field.label">
        <button (click)="deleteField(index)">delete</button>
      </li>
    </ul>
    valid: <span [style.color]="editorForm.valid ? 'green' : 'red'">{{editorForm.valid}}</span>
</form>

像这样的控制器：

export class AppComponent implements OnInit {
  public fields: Field[];
  ngOnInit() {
    this.fields = [];
  }

    public addField(): void {
        this.fields.push({
            label: "",
        });
    }

    public deleteField(index: number) {
        this.fields.splice(index, 1);
    }
}

export class Field {
    public label: string;
}

如果添加两个字段，您可以看到表单现在无效（如预期的那样），然后按顺序删除底部字段，然后是顶部字段，表单现在有效（如预期的那样）。

但如果我添加两个字段，然后先删除顶部字段，然后删除底部字段，表单仍然无效。表格应该再次生效。

您可以尝试的另一件事是添加 3 个字段，然后从上到下删除（现在无效）。然后添加 2 个字段，并从底部到顶部移除。通常，从下到上删除会起作用，但由于我们之前添加了 3，您现在需要添加 3，然后从下到上删除它们以解决问题。所以似乎有某种 Angular 状态以某种方式存在...想法？

Answer 1

因为您要添加和删除 DOM 元素 *ngFor 需要 trackBy 属性，所以表单可以跟随元素有效性更改：

打字稿：

trackBy(index, item) {
   return index;
}

HTML:

<li *ngFor="let field of fields; trackBy:trackBy; let index=index">

Working Demo

您可以阅读更多相关内容 here

当 adding/removing 个元素来自数组时，表单有效性不一致

Inconsistency in form validity when adding/removing elements from array

angular2-forms

angular2-template

angular