Angular 如何无需遍历属性即可判断表单值是否与初始值一致

可用方案 #

无需手动遍历表单属性，直接用原生API即可实现你的需求：

注意：不要直接用pristine/dirty属性判断，只要用户修改过表单哪怕改回初始值，pristine都会变为false、dirty变为true，无法匹配「值完全一致」的判断场景。

你初始化表单的代码为：

const newGroup = this.formBuilder.group({
  count: ['0'],
  name: ['selena']
});

步骤1：表单初始化后存储初始值快照 #

// getRawValue可以获取包含禁用控件在内的所有表单值，比直接取value覆盖场景更全
const initialSnapshot = JSON.stringify(newGroup.getRawValue());

步骤2：需要判断时直接对比序列化结果 #

const isValueSame = JSON.stringify(newGroup.getRawValue()) === initialSnapshot;

特性说明 #

• 完美适配你提到的「把name从selena修改为mario后又改回selena」的场景：只要最终值和初始值完全一致，对比结果就会返回true
• 常规表单存储的都是字符串、数字、布尔等基础类型，都可以正常序列化，只有当表单值包含函数、Symbol、循环引用等特殊内容时，才需要额外写深比较逻辑
• 不要直接用newGroup.value和初始值对象用==/===对比，因为是不同的引用对象，永远返回false

内容的提问来源于stack exchange，提问作者Simon Del Rio