重置角度反应形式的更改[关闭]

Question

我开发了一个有角度的反应形式：

选择下拉列表 ===> [id] = 1, 2, 3....等

输入文本 ===> 名称：.....

输入文本 ===> 地址：.....

输入文本 ===> 描述：.....

我通过在 ngOnInit 和选择下拉列表上的（更改）处理程序中调用基于所选 id 的 http get 服务来填写表单

我有两个按钮：“验证”和“取消”修改

用户可以修改输入数据值并在点击验证按钮时保存修改。

取消用户所做修改的最佳方法是什么？

Answer 1

使用响应式表单时，您的对象值不会绑定到表单，因此用户所做的任何更改不会修改原始对象。

您可以使用如下代码将现有对象中的值复制回表单值：

// Update the data on the form
this.productForm.patchValue({
  productName: this.product.productName,
  productCode: this.product.productCode,
  starRating: this.product.starRating,
  description: this.product.description
});

更新

我假设您当前的流程是这样的：

1) 在 ngOnInit 中，检索您的数据并将其存储在一个属性中，例如上面代码中显示的product。

2) 然后使用与上述类似的代码填充表单。

当用户进行更改时，不会对原始属性进行更改（本例中为product）。而是将它们制作成使用 FormGroup 定义的表单模型。

因此，您需要做的就是重复步骤 2 中的代码以取消任何更改并将表单返回到用户进行任何更新之前的状态。

这有意义吗？

Answer 2

angular中的表单控件有reset方法：

reset(value?: any, options?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

例子

class Component {
  form: FormGroup;

  resetForm() {
    this.form.reset();
  }
}