Question

我在角度2中构建服务，允许用户在页面上编辑多个表单，然后一次保存所有更改。如果用户决定不保存更改，我在尝试添加重置表单的功能时遇到了问题。

我在表单上使用单向数据绑定与EventEmitter结合使用来手动处理输入字段的更改。

<input class="form-control" [ngModel]="model" (ngModelChange)="change($event)"/>

基本上，当用户对任何表单进行更改时，我使用ngModelChange手动捕获更改并将其缓存在我的服务中。这允许模型保持不变，直到用户保存并且HTTP响应返回更新的模型。因此，我可以保留旧值，以防用户想要重置所有内容，同时还能成功跟踪服务中的更改。 我的问题是，由于单向数据绑定的性质，我无法让表单重新呈现，因为模型从未在第一时间发生变化 。那么，有没有办法手动触发表单输入的重新呈现以将它们恢复为模型的值？

Answer 1

您应该可以通过FormGroup reset api将表单的值设置回未更改的模型。我假设您的输入是更大表单的一部分，使用ngForm。

我见过的大多数示例都使用重置来清除表单，即清除值和touched＆amp; dirty个标志。

但是reset还允许您提供所需控件值的地图，您可以从模型中的值中获取控件值。

我怀疑我很快就会在项目的某些表单中出现这种行为，所以我很想知道这对你有什么影响。

Answer 2

我同意上述答案。您可以使用此类代码在编辑之前获取FormGroup的“快照”：

...
private snapshot: any;
private formGroup: FormGroup;

private takeSnapshot() {
    this.snapshot = {};
    for (let id in this.formGroup.controls) {
      this.snapshot[id] = this.formGroup.controls[id].value;
    }
}
...
// before editing, call this.takeSnapshot()

...然后，当您想要还原时，将快照传递给formgroup的reset（）方法：

this.formGroup.reset(this.snapshot)

如何在使用单向数据绑定的组件中将表单值还原为模型值？

2 个答案: