Angular中Form.io提交表单后刷新获取新表单ID（不刷新窗口）

以下是具体实现方案：

1. 组件代码实现 #

在你的Angular组件中，定义触发刷新的事件发射器、存储表单数据的变量，并监听表单提交事件：

import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
import { FormioComponent } from 'angular-formio';

@Component({
  selector: 'app-formio-wrapper',
  templateUrl: './formio-wrapper.component.html'
})
export class FormioWrapperComponent {
  // 用于触发表单刷新的事件发射器
  @Output() refreshForm = new EventEmitter<boolean>();
  // 获取Formio组件实例
  @ViewChild(FormioComponent) formioComponent!: FormioComponent;
  // 存储提交后的表单数据
  savedFormData: any = {};

  handleFormSubmit(submission: any) {
    // 只保存用户输入的data部分，排除自动生成的_id、__v等字段
    this.savedFormData = { ...submission.data };
    
    // 触发表单刷新，Form.io会自动生成新的提交ID
    this.refreshForm.emit(true);

    // 等待表单刷新完成后回填数据
    setTimeout(() => {
      if (this.formioComponent?.form) {
        this.formioComponent.form.submission = { data: this.savedFormData };
      }
    }, 300);
  }
}

2. 模板配置 #

在模板中绑定refresh属性、提交事件，并指定你的Form.io表单地址：

<formio
  [src]="'https://your-formio-form-endpoint'"
  [refresh]="refreshForm"
  (submit)="handleFormSubmit($event)"
></formio>

关键说明 #

• 提交时只保留submission.data，避免携带原有提交的ID等自动字段，防止和新提交实例冲突。
• 触发refreshForm事件后，Form.io渲染器会重新初始化表单，自动创建新的提交实例并生成新ID，无需手动分配。
• 使用setTimeout是为了确保表单完成刷新初始化后再回填数据，如果你能找到Form.io组件提供的刷新完成事件（比如部分版本有refresh完成回调），可以用那个事件替代setTimeout，更可靠。

内容的提问来源于stack exchange，提问作者Jo Momma