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

前端之家收集整理的这篇文章主要介绍了angular – 将Form设置为Pristine而不清除数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个表单显示< 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

原文链接:https://www.f2er.com/angularjs/143987.html

猜你在找的Angularjs相关文章