修改字段默认值后Formly表单未完全更新问题

问题现象 #

修改FormlyFormConfig数组中字段的defaultValue属性后，表单视图未同步更新；但修改props.label或新增字段时，调用this.options.build()能正常生效。示例代码如下：

this.fields[0].props.label = 'new label'; // 视图正常更新
this.fields[0].defaultValue = 'new def val'; // 视图无变化
this.fields.push({
  key: 'cbx',
  type: 'checkbox',
  props: { label: 'new cbx' },
}); // 新增字段正常渲染
this.options.build();

原因分析 #

Formly的defaultValue仅在字段初始化阶段被读取并赋值到表单模型（model对象）中。后续修改defaultValue不会自动同步到已存在的模型值，而options.build()主要负责重新渲染字段结构，不会覆盖已初始化的模型数据。

解决方案 #

方案1：直接更新模型值（推荐）

跳过修改defaultValue，直接修改Formly绑定的model对象对应key的值，变更检测会自动同步到视图：

// 直接更新模型，视图会自动同步
this.model.email = 'new def val';

方案2：通过defaultValue同步（需清除模型值）

如果必须通过修改defaultValue来更新，需要先清除对应模型值，让Formly在build()时重新读取defaultValue并初始化：

this.fields[0].defaultValue = 'new def val';
// 清除模型中对应key的值，触发Formly重新应用defaultValue
delete this.model.email;
this.options.build();

为什么label和新增字段能生效？ #

• 修改props.label时，Formly字段组件会监听props的变化，触发变更检测更新视图；
• 新增字段时，options.build()会初始化新字段的defaultValue到模型，因此能正常显示默认值。

内容的提问来源于stack exchange，提问作者Marc de Verdelhan