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

看看这个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;
}

如果添加两个字段,您可以看到表单现在无效(如预期),然后依次删除底部字段和顶部字段,表单现在有效(如预期)。

应该 再次生效。