单击angular5中的“取消更改”按钮，在FormArray中恢复模式原始状态

Question

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

我试图在有角的官方网站上寻找它， 在stackOverflow上，但找不到与此类似的内容。

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

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

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