FormIO + Angular：输入值同步至另一输入框视图不更新问题

你已经正确更新了myJSON的数据，但视图没有同步，核心原因是Angular的变更检测机制依赖引用变化——当你直接修改现有对象的属性时，对象本身的引用没有改变，导致Form.io组件没检测到submission的更新。下面是具体的解决方案：

方案1：创建新的Submission对象（推荐） #

不要直接修改myJSON的属性，而是通过创建对象副本强制触发变更检测。这样Form.io组件会感知到submission输入的引用变化，从而更新视图：

onChange(param: any) {
  // 从param中获取Name字段的最新值
  const newNameValue = param.data.n;
  
  // 创建新的submission对象，保留原有数据，仅更新Name2字段
  this.myJSON = {
    ...this.myJSON, // 复制原有submission的顶层属性
    data: {
      ...this.myJSON.data, // 复制原有data对象的属性
      n2: newNameValue // 更新Name2的值
    }
  };
  
  console.log('更新后的myJSON:', this.myJSON);
}

这里用ES6扩展运算符(...)做对象浅拷贝，确保myJSON的引用发生变化，Angular会自动检测到这个变化并同步视图。

方案2：手动触发变更检测 #

如果方案1不生效，或者你需要保留原对象引用，可以手动触发Angular的变更检测。首先在组件中注入ChangeDetectorRef：

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  myJSON: any;
  formProva: any;

  constructor(private cdr: ChangeDetectorRef) {}

  onChange(param: any) {
    // 直接修改myJSON的Name2字段
    this.myJSON.data.n2 = param.data.n;
    
    // 手动触发变更检测
    this.cdr.detectChanges();
    
    console.log('更新后的myJSON:', this.myJSON);
  }
}

detectChanges()方法会强制Angular检查组件及其子组件的变化，从而更新Form.io的视图。

额外检查点 #

• 确认myJSON的结构正确，data字段下确实存在n2字段（对应Name2输入框的name属性）。
• 检查Form.io的表单Schema中，Name2字段的key是否设置为n2，确保和你更新的字段名一致。

内容的提问来源于stack exchange，提问作者J Doe