在不清除数据的情况下将表单设置为 Pristine答案

【问题标题】：Set Form to Pristine without clearing data在不清除数据的情况下将表单设置为 Pristine
【发布时间】：2017-04-03 02:08:20
【问题描述】：

我有一个显示<input type="text"> 元素列表的表单。它们都共享一个通用的保存按钮，该按钮在表单变脏之前被禁用。然后，一旦用户点击保存按钮，数据就会被提交到服务器。如果服务器成功保存数据，我想将表单重置为原始状态，但我想保留表单中的所有数据，以便用户可以选择进一步编辑数据。

经过搜索，找到了NgForm.reset()方法。虽然这确实将表单设置为原始状态，但不幸的是它也清除了表单。 reset 方法似乎确实有一个 value 参数，但我似乎无法找出它的作用。不过，我不想清除数据。

我也尝试过myForm.pristine = true，但这会由于某种原因导致页面重新加载。

Here is a plunkr demonstrating the problem.

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

你要找的是myForm.form.markAsPristine()。

【讨论】：

那么，我可以将 markAsPristine() 属性应用于特定控件吗？
对我有用的语法是myForm.markAsPristine()。
还要小心，因为它会在内部将脏设置为 false

【解决方案2】：

目前我可以提出两种可能的解决方案。第一个非常接近您的建议，因为表单的 reset 方法具有以下签名并接受表单值作为第一个参数：

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

在提交处理程序中，我们将捕获最后一个状态的副本：

const { myForm: { value: formValueSnap } } = this;

然后自行重置：

this.myForm.reset(formValueSnap, false);

在无法重置表单的时代的另一个选择是创建一个辅助方法，它将每个控件标记为pristine 并保留数据。可以在同一个提交助手中调用它来代替重置。

private _markFormPristine(form: FormGroup | NgForm): void {
    Object.keys(form.controls).forEach(control => {
        form.controls[control].markAsPristine();
    });
}

链接到更新后的plunkr。

【讨论】：

如何以模板驱动形式实现这一点？？
_markFormPristine 不会对嵌套控件进行操作； form.controls 可以在其中包含更多 FormGroup 对象，并带有自己的控件 - form.controls.foo.controls.bar.markAsPristine()。

【解决方案3】：

如果您碰巧使用的是模板驱动的表单，并且您的组件中有这样的内容： @ViewChild('myForm') myform: NgForm;

我发现markAsPristine() 是表单的表单属性上的一个函数。所以应该是this.myform.form.markAsPristine()。

只是想我会添加这个以防其他人遇到 markAsPristine() 未定义。

【讨论】：

而不是类型any，我建议使用正确的类型NgForm。示例：@ViewChild('myForm') myform: NgForm;
我可以将 markAsPristine() 属性应用到特定控件@Mike 吗？

【解决方案4】：

我想我用我的方法解决了这个问题：

form.controls['contato'].reset();

【讨论】：

这会清除该特定控件中的数据并将其标记为原始，这与原始问题想要的行为不匹配。

【解决方案5】：

使用 Angular 的 reactive forms 时，可以在 FormGroup 上使用 markAsPristine()：

export class MyPage

  // Your form group
  public formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      // Add your form controls here
    });
  }

  onSubmitForm() {
    // Get form value and save data on the server
    // ...

    this.formGroup.markAsPristine(); // <=== Mark form group as pristine
  }
}

另请参阅：AbstractControl.markAsPristine() 的文档。注意：FormGroup 是 AbstractControl 的子类。它将 FormGroup 的所有子项标记为原始。

【讨论】：

【解决方案6】：

我在form 属性中没有找到markAsPristine()，但是我找到了_pristine 属性，this.myForm['form']._pristine，可以设置为true。

@ViewChild('myForm') myForm: ElementRef;
this.myForm['form']._pristine = true;

【讨论】：

【解决方案7】：

要重置表单：

this.form.reset();

【讨论】：