Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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

大佬总结

以上是大佬教程为你收集整理的angular – 将Form设置为Pristine而不清除数据全部内容,希望文章能够帮你解决angular – 将Form设置为Pristine而不清除数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。