如何將表單值還原為使用單向數據綁定的組件中的模型值？

Question

我正在以角度2構建服務，允許用戶在頁面上編輯多個表單，然后一次保存所有更改。 如果用戶決定不保存更改，我在嘗試添加重置表單的功能時遇到了問題。

我在我的表單上使用單向數據綁定與EventEmitter結合使用來手動處理對輸入字段的更改。

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

基本上，當用戶對任何表單進行更改時，我使用ngModelChange手動捕獲更改並將其緩存在我的服務中。 這允許模型保持不變，直到用戶保存並且HTTP響應返回更新的模型。 因此，我可以保留舊值，以防用戶想要重置所有內容，同時還能成功跟蹤服務中的更改。 我的問題是，由於單向數據綁定的性質，我無法讓表單重新渲染，因為模型從未改變過 。 那么，有沒有辦法手動觸發表單輸入的重新呈現以將它們恢復為模型的值？

Answer 1

您應該能夠通過FormGroup 重置 api將表單的值設置回未更改的模型。 我假設你的輸入是一個更大的形式的一部分，使用ngForm 。

我見過的大多數示例都使用reset來清除表單，即清除值和touched 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)