Angular - 反应式表单，如何正确存储初始值，并检查表单中的更改？答案

【问题标题】：Angular - Reactive form, how to correctly store the initial value, and check for changes in the form?Angular - 反应式表单，如何正确存储初始值，并检查表单中的更改？
【发布时间】：2019-06-04 08:21:40
【问题描述】：

我正在使用 angular 6 的反应形式，我有 2 个问题。

第一个，存储表单初始值的正确方法是什么？

我对 Angular 还是很陌生，到目前为止我所做的是在控制器中声明所有表单代码，然后在视图中我将这些控件与 fromControlName 标记绑定。

一切正常，但现在我想实现一个保存/取消按钮。由于表单是根据用户做出的一些选择预先填写的（我用this.myForm.get("valueToPrefill").setValue(prefillValue) 预先填写了表单），所以当用户打开表单时，一些字段已经被预先填写了！

我需要做的是，以某种方式克隆或存储初始数据，所以当用户完成编辑时，如果他按“保存”，那么这个临时表单数据将被写入表单（我猜是就像我预先填写它一样，get("form_Name).setValue() 对吗？），但如果他要使用取消按钮，那么我应该恢复到原始状态！

目前，当用户填写表单值时，它会直接写在表单上，因为 fromControlName 标记将输入字段绑定到我的表单。

我应该怎么做才能有一个表单的副本来写，只有在我保存之后，它才会将这些值写入我在控制器中声明的原始表单上？

第二个问题，如果表单是原始的，我的保存按钮会被禁用。但我想更进一步！如果用户删除了一个字符，或者更改了一个下拉列表，然后通过返回到原始值来恢复这些更改，那么表单现在是脏的，但数据实际上从未从初始状态改变！那么在这种情况下如何保持“保存”按钮处于禁用状态呢？我可以想象当我设法拥有一个克隆的表单时进行检查，以便我可以将初始数据与存储的数据进行检查，然后进行比较对吗？

非常感谢

【问题讨论】：

如果您遇到困难，请先尝试，然后提出具体问题！你可以找到一个非常好的教程，我什至为你搜索了一个：intertech.com/Blog/angular-reactive-forms-tutorial
谢谢，我的具体问题主要是关于如何检查我的表单字段是否没有改变（原始/脏是不够的），所以如果用户改变了一些东西，然后又把它改回来在保存表单之前，应该禁用保存按钮，因为表单和以前一样！
如果你创建了一个 stackblitz 项目，我很乐意向你展示一种实现你想要的方法
是否存在仅使用 formGroups 的预制堆栈闪电战？因为我的表单很大，有很多验证器，把它放在 stackblitz 上会很痛苦！一个字段就足以理解如何检查值是否真的发生了变化的逻辑！很快就会用 formGroup 寻找一个预制的 stackblitz
这里是一个带有单个表单组和一个 formArray 的 stackblizt，以及一个保存按钮，当表单处于原始状态时，该按钮现在被禁用 stackblitz.com/edit/…

标签： javascript angular angular-reactive-forms

【解决方案1】：

您可以简单地使用 @angular/forms API (https://angular.io/api/forms)：

saveForm(){
this.savedFormState = formGroup.getRawValue()
}
resetForm(){
formGroup.patchValue(this.saveFormState);
// Reset states like dirty, markAsTouched
}

请注意，该对象必须与您的 FormGroup 匹配。

【讨论】：

感谢您的回答，重置表单，这很清楚，我正在这样做，但我没有完全得到您的 saveForm()，getRawValue() 检索什么？我的 FormGroup 的每个字段的当前状态和值？因此，如果是这种情况，我应该在初始化表单时将 RawValue 保存到 Var 中，以获得初始表单的副本？所以 getRawValue() 始终是我当前的表单，而 savedFormState 是上次保存状态的表单？
Yes getRawValue() 返回一个与 AbstractControl 结构相同的对象。您可以将此数据存储在一个变量中，并在需要时使用它。

【解决方案2】：

我编辑了你的stackblitz
由于您拥有原始数据，因此您无需拥有该表单的副本。
您需要识别您的数据，目前您只有grade 和value，它们是表单中的两个字段。所以我添加了一个 id 来识别你的配对。

【讨论】：