检查反应形式是否仍然具有其默认值答案

【问题标题】：Check if reactive form still have its default values检查反应形式是否仍然具有其默认值
【发布时间】：2018-07-30 01:56:30
【问题描述】：

我正在使用 Angular 6，并且我有一个包含很多字段的反应形式。有些是下拉菜单，有些是数字，默认情况下它们的值为空，而其他一些下拉菜单的默认值默认为true。

用户可以选择字段的一个或全部或任意组合。所以我不能拥有所有需要的字段。

但是我必须知道表单是否还有它的默认值，所以我可以取消提交。

我尝试了一些检查

ngOnInit() {
 this.initialState = this.form.value;
}
submit(){
 if(this.initialState != this.form.value)...
}

报错

submit(){
 if(this.form.pristine)...
}

表单仍然可以改回其默认值

我可以使用某种 for ，但我有 8 个字段，因此在每次提交尝试之前循环 8 次并不理想。

所以我必须手动检查 if 之类的 if (!this.form.control.field1.value && this.form.control.field2.value === true ....)??

有没有更快更好的方法？只检查整个表格？

谢谢

【问题讨论】：

提交后为什么不重置表单并设置默认值
this.initialState != this.form.value 每次都会给出 false , object test by refrence 和 form.value defrreant object
提交前怎么办？
你可以使用 form.reset({name:'value'}) 所以提交后重置值
对不起，我不明白你所说的this.initialState != this.form.value等。你能进一步解释一下吗？

标签： angular forms angular6 angular-reactive-forms

【解决方案1】：

这样的事情经常对我有用：

get isDirty(): boolean {
    return JSON.stringify(this.originalProduct) !== JSON.stringify(this.currentProduct);
}

我保留原始对象的副本，将其字符串化并将其与字符串化的更新对象进行比较。

【讨论】：

【解决方案2】：

Javascript 对象是引用类型，因此即使您声明了一些变量并将空对象分配给所有主题，仍然指向不同的内存位置并且是不同的。

 var a  = {};
 var b = {};
 a === b ; => false 
 a !== b;  => true but this not valid

这就是为什么这个if(this.initialState != this.form.value)... 是错误的。

为了检查表单是否仍然具有初始值，您必须检查 initialState 的每个属性以及 form.value 中的每个等效属性，它看起来像 initialState.name === form.value.name

let isInitialStateValid = Objects.keys(this.initialState) 
       .map(key => this.initialState[key] === this.form.value[key])  
       .reduce((p,n) => p = p && n);

这将确保您的表单是否仍有初始数据

您可以使用reset 方法将表单重置为初始状态

this.form.reset(this.initialState);

【讨论】：