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

Question

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

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

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

Here is a plunkr demonstrating the problem.

Answer 1

目前我可以提出两种可能的解决方案。第一个非常接近您的建议，因为表单的 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();
    });
}

Link 到更新后的 plunkr.

Answer 2

您要查找的是myForm.form.markAsPristine()。

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

当使用 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 的所有子级标记为原始。

Answer 7

重置表格：

this.form.reset();

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

Set Form to Pristine without clearing data

angular

angular-reactive-forms