Angular中如何设置Formio表单Select组件的值

直接操作DOM元素设置值的方式不适用于Formio表单，因为Formio表单是动态渲染的，且内部维护独立的表单状态，直接修改DOM无法同步到Formio的表单数据中。正确的做法是利用Formio提供的官方事件和API来设置表单值：

步骤1：绑定Formio表单就绪事件 #

修改模板代码，添加formReady事件监听，该事件会在表单完全初始化完成后触发：

<formio [src]="config.appUrl + '/esdtest'" (formReady)="onFormReady($event)"></formio>

步骤2：通过Formio实例设置表单值 #

在组件类中实现onFormReady方法，利用Formio实例提供的API设置城市字段值：

import { Component } from '@angular/core';
import { Formio } from 'formiojs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  config = {
    appUrl: '你的Formio服务地址'
  };

  onFormReady(form: any) {
    // 若需依赖accessInfo，可将逻辑包裹在此回调内
    Formio.accessInfo().then(() => {
      // 方式1：直接修改表单数据并刷新UI
      form.submission.data.city = 'Hyderabad';
      form.refresh();

      // 方式2：使用Formio的setValue方法（更推荐，自动同步UI）
      // form.setValue('data.city', 'Hyderabad');
    });
  }
}

关键说明 #

• formReady事件确保表单已完全渲染并初始化，此时操作Formio实例才能生效
• 直接修改form.submission.data后需调用refresh()同步UI；使用setValue()方法则无需手动刷新，Formio会自动处理UI同步
• 避免直接操作DOM元素，这种方式会绕过Formio的内部状态管理，导致表单数据与UI不一致

内容的提问来源于stack exchange，提问作者v.sai