Question

我正在使用角度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 ....) ??

有更快，更好的方法吗？只需对整个表格进行一次检查？

谢谢

Answer 1

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

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

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

为了检查表单是否仍具有初始值，您必须检查form.value中每个与initial.State属性对应的属性，它看起来像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);

Answer 2

类似的事情通常对我有用：

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

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

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

2 个答案: