在 angular5 中单击 "Cancel Change" 按钮时恢复 FormArray 中的模态原始状态

Question

我正在开发 Angular 5 应用程序并使用反应形式的 FormArray。 当用户在一个或多个 FormGroup 中进行一些更改，然后改变主意并单击 "Cancel change" 按钮时，如何恢复组件模型的初始状态？？

我试着在 angular 官方网站上寻找这个并且 在 Whosebug 上，但没有找到与此类似的内容。

Answer 1

您需要具有原始表单对象状态。

let original = {
   fname: '',
   lname: '',
   date: ''
};

复制原始对象

let copied = Object.assign({}, original);

您可以在表单组和表单数组中使用复制的对象。

点击重置时，可以使用原来的对象。

Answer 2

这是您重置的方式：

const originalState = {foo: 'bar'};

public myForm = this.fb.group(originalState);

resetMyForm() {
  this.myForm.reset(originalState);
}

仅调用 reset() 会将所有控件设置为 null。

Answer 3

不知何故，重置函数不是我想要的，所以我最终使用下面的函数来重置 formarray，

purgeForm(form: FormArray) {
    while (0 !== form.length) {
      form.removeAt(0);
    }
  }