角度-反应形式，如何正确存储初始值，并检查形式是否发生变化？

Question

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

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

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

一切正常，但是现在我要实现“保存/取消”按钮。 由于表单是根据用户的选择进行预填充的（我用this.myForm.get("valueToPrefill").setValue(prefillValue)填充了表单），因此当用户打开表单时，某些字段将已经被预填充！

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

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

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

第二个问题，如果表格原始，当前我的“保存”按钮将被禁用。 但是，我想更进一步！ 如果用户删除字符或更改下拉菜单，然后又通过返回到原始值来还原这些更改，则该表单现在是脏的，但是数据实际上从未从初始状态更改过！那么在这种情况下如何使“保存”按钮保持禁用状态呢？ 我可以想像要在有一个克隆表格的情况下进行检查，以便可以将初始数据与存储的表格进行比较，然后将它们进行比较吗？

非常感谢您

Answer 1

我编辑了您的stackblitz
您不必拥有表格的副本，因为您拥有原始数据。
您需要标识数据，当前您只有grade和value这两个表单中的字段。因此，我添加了一个ID来标识您的配对。

Answer 2

您只需为此使用@ angular / forms API（https://angular.io/api/forms）：

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

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