angular – 将Form设置为Pristine而不清除数据

发布时间：2020-12-17 08:03:34 所属栏目：安全来源：网络整理

导读：我有一个表单显示 input type =“text”列表元素。它们共享一个共同的保存按钮，该按钮在表单变脏之前被禁用。然后，一旦用户单击“保存”按钮，数据将被提交给服务器。如果服务器成功保存了数据，我想将表单重置为原始状态，但我想保留表单中的所有数据，以

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

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

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

Here is a plunkr demonstrating the problem。

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

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

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

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

并重置自己：

this.myForm.reset(formValueSnap,false);

当时没有可能重置表单的时候另一个选择是创建一个帮助方法，它将每个控件标记为原始并保留数据。它可以在同一个提交助手中调用，而不是重置。

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

链接到更新的plunkr。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!