Question

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

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

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

Here is a plunkr demonstrating the problem

Answer 1

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

Answer 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。

Answer 3

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

我发现markAsPristine()是表单表单属性的函数。所以它会是this.myform.form.markAsPristine()。

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

Answer 4

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

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

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

Answer 6

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

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

Answer 7

要重置表格：

this.form.reset();

将表单设置为Pristine而不清除数据

7 个答案: