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

的更多信息

从数组添加/删除元素时表单有效性不一致

1 个答案: