Angular-Formly隐藏字段时如何清除或置空模型对应值？

针对你遇到的angular-formly v8.4.1 + angular-formly-templates-bootstrap v6.5.1中，hideExpression仅移除DOM但保留模型值，导致提交时带隐藏字段数据、依赖字段无法自动隐藏的问题，这里有几个直接可行的解决方案：

方案一：给单个字段添加onHide钩子 #

angular-formly的字段钩子onHide会在字段因hideExpression触发隐藏时执行，我们可以利用这个钩子直接修改模型值，同时触发模型更新事件让依赖字段重新计算表达式。

示例代码：

{
  key: 'toggleCheckbox',
  type: 'checkbox',
  templateOptions: {
    label: '控制第三个字段显隐'
  },
  hideExpression: 'model.someTriggerCondition', // 你的隐藏逻辑
  hooks: {
    onHide: function(field) {
      // 把隐藏字段的模型值设为null（也可以用delete field.model[field.key]直接移除）
      field.model[field.key] = null;
      // 触发模型更新事件，让所有字段重新计算hideExpression等表达式
      field.options.formState.$emit('formly-model-updated');
    }
  }
}

这样操作后：

• 隐藏字段的模型值会被置为null，提交时后端如果忽略null值就不会携带该字段
• 依赖这个字段的第三个字段，会因为模型值变化重新计算hideExpression，从而自动隐藏

方案二：全局配置所有字段自动处理 #

如果需要所有字段都遵循“隐藏时清空模型值”的规则，可以通过formly的全局字段转换或基础类型扩展来实现，不用逐个字段配置：

angular.module('yourApp').config(function(formlyConfigProvider) {
  // 给所有基于bootstrap模板的字段添加全局钩子
  formlyConfigProvider.setType({
    name: 'bootstrap-base',
    extends: 'bootstrap',
    hooks: {
      onHide: function(field) {
        if (field.key) {
          // 如果是嵌套key（如'user.city'），可以用lodash的_.set来处理
          // _.set(field.model, field.key, null);
          field.model[field.key] = null;
          field.options.formState.$emit('formly-model-updated');
        }
      }
    }
  });

  // 设置所有字段默认使用这个基础类型
  formlyConfigProvider.setWrapper({
    name: 'default',
    types: ['bootstrap-base']
  });
});

注意事项 #

• 如果字段的key是嵌套路径（比如user.address.zip），直接赋值field.model[field.key]会出错，建议引入lodash的_.set和_.unset方法来处理：

  // 置为null
  _.set(field.model, field.key, null);
  // 或者直接从模型中移除
  _.unset(field.model, field.key);
  

• 触发formly-model-updated事件是关键，它会让formly重新计算所有字段的表达式，确保依赖字段的显隐状态同步更新

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