Angular - 响应式表单，如何正确存储初始值，并检查表单的变化？
Angular - Reactive form, how to correctly store the initial value, and check for changes in the form?
我正在使用 angular 6 的反应式表格，我有 2 个问题。
第一个，存储表单初始值的正确方法是什么？
我是 angular 的新手，到目前为止我所做的是在控制器中声明所有表单代码，然后在视图中我将这些控件与 fromControlName 标签。
一切正常，但现在我想实现一个 Save/Cancel 按钮。
由于表单是根据用户所做的一些选择预先填写的（我用 this.myForm.get("valueToPrefill").setValue(prefillValue) 预先填写了表单），所以当用户打开表单时，一些字段已经被预先填写了！
我需要做的是，以某种方式克隆或存储初始数据，所以当用户完成编辑时，如果他按 "Save"，那么这个临时表单数据将被写入表单（我猜和我预填的一样，get("form_Name).setValue(）对吧？），但如果他使用取消按钮，那我应该恢复到原来的状态！
目前，当用户填写表单值时，它会直接写在表单上，因为 fromControlName 标签将输入字段绑定到我的表单。
我应该怎么做才能在上面写一个表单的副本，只有在我保存之后，它才会将这些值写入我在控制器中声明的原始表单？
第二个问题，如果表单是原始的，目前我的保存按钮会被禁用。
但我想更进一步！
如果用户删除了一个字符，或者更改了一个下拉列表，然后通过返回到原始值来恢复这些更改，那么表单现在是脏的，但数据实际上从未从初始状态改变过！那么在这种情况下如何使保存按钮保持禁用状态呢？
我可以想象当我设法拥有一个克隆表单时进行检查，这样我就可以检查初始数据与存储的数据，并将它们进行比较，对吗？
非常感谢
你可以简单地使用@angular/forms API (https://angular.io/api/forms):
saveForm(){
this.savedFormState = formGroup.getRawValue()
}
resetForm(){
formGroup.patchValue(this.saveFormState);
// Reset states like dirty, markAsTouched
}
请注意，该对象必须与您的 FormGroup 匹配。
我编辑了你的stackblitz
您不需要表格的副本，因为您有原始数据。
您需要识别您的数据，目前您在表单中只有 grade 和 value 这两个字段。所以我添加了一个 id 来识别你的配对。
我正在使用 angular 6 的反应式表格，我有 2 个问题。
第一个，存储表单初始值的正确方法是什么？
我是 angular 的新手，到目前为止我所做的是在控制器中声明所有表单代码，然后在视图中我将这些控件与 fromControlName 标签。
一切正常，但现在我想实现一个 Save/Cancel 按钮。
由于表单是根据用户所做的一些选择预先填写的（我用 this.myForm.get("valueToPrefill").setValue(prefillValue) 预先填写了表单），所以当用户打开表单时，一些字段已经被预先填写了！
我需要做的是，以某种方式克隆或存储初始数据，所以当用户完成编辑时，如果他按 "Save"，那么这个临时表单数据将被写入表单（我猜和我预填的一样，get("form_Name).setValue(）对吧？），但如果他使用取消按钮，那我应该恢复到原来的状态！
目前，当用户填写表单值时，它会直接写在表单上，因为 fromControlName 标签将输入字段绑定到我的表单。
我应该怎么做才能在上面写一个表单的副本，只有在我保存之后，它才会将这些值写入我在控制器中声明的原始表单？
第二个问题，如果表单是原始的，目前我的保存按钮会被禁用。 但我想更进一步！ 如果用户删除了一个字符，或者更改了一个下拉列表，然后通过返回到原始值来恢复这些更改，那么表单现在是脏的，但数据实际上从未从初始状态改变过！那么在这种情况下如何使保存按钮保持禁用状态呢？ 我可以想象当我设法拥有一个克隆表单时进行检查，这样我就可以检查初始数据与存储的数据，并将它们进行比较，对吗？
非常感谢
你可以简单地使用@angular/forms API (https://angular.io/api/forms):
saveForm(){
this.savedFormState = formGroup.getRawValue()
}
resetForm(){
formGroup.patchValue(this.saveFormState);
// Reset states like dirty, markAsTouched
}
请注意，该对象必须与您的 FormGroup 匹配。
我编辑了你的stackblitz
您不需要表格的副本，因为您有原始数据。
您需要识别您的数据，目前您在表单中只有 grade 和 value 这两个字段。所以我添加了一个 id 来识别你的配对。