ngx-formly表达式属性详解：动态控制表单字段行为-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00612/article/details/148756598

ngx-formly表达式属性详解：动态控制表单字段行为

ngx-formly 📝 JSON powered / Dynamic forms for Angular 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-formly

引言

在表单开发中，我们经常需要根据用户输入或其他条件动态调整表单字段的行为。ngx-formly提供的表达式属性(expression properties)功能，让开发者能够轻松实现这一需求。本文将深入解析ngx-formly中表达式属性的各种用法，帮助你掌握动态控制表单字段的技巧。

表达式属性基础

表达式属性是ngx-formly中一个强大的特性，它允许你基于模型数据或其他条件动态修改字段属性。表达式可以接受字符串或函数两种形式，为开发者提供了极大的灵活性。

基本语法结构

表达式属性的基本语法如下：

expressions: {
  'property.path': expressionValue
}

其中property.path表示要修改的属性路径，expressionValue可以是字符串表达式或函数。

动态修改字段属性

1. 使用字符串表达式

字符串表达式是最简单的形式，直接引用模型中的值：

{
  key: 'text2',
  type: 'input',
  props: {
    label: '示例字段',
    placeholder: '当其他输入框为空时禁用此字段'
  },
  expressions: {
    'props.disabled': '!model.text',  // 当model.text为空时禁用
  },
}

这种写法简洁明了，适合简单的条件判断。

2. 使用函数表达式

对于更复杂的逻辑，可以使用函数表达式：

{
  key: 'country',
  type: 'input',
  props: { label: '国家' },
  expressions: {
    'props.disabled': (field: FormlyFieldConfig) => {
      return !field.model.text;
    },
  }
}

函数表达式接收当前字段配置作为参数，可以访问模型数据、表单状态等信息，实现复杂的业务逻辑。

3. 使用formState共享数据

在复杂场景中，你可能需要在不同字段间共享数据。这时可以使用formState：

options = {
  formState: {
    sharedData: { ... }
  },
};

然后在表达式中通过field.options.formState访问这些共享数据。

条件渲染字段

ngx-formly提供了多种方式控制字段的显示/隐藏。

1. 使用hide属性

{
  key: 'iLikeTwix',
  type: 'checkbox',
  props: { label: '我喜欢Twix' },
  expressions: { 
    hide: '!model.name'  // 当name为空时隐藏
  },
}

2. 动态切换显示状态

你可以在组件中直接控制字段的显示状态：

fields: FormlyFieldConfig[] = [
  {
    key: 'country',
    type: 'input',
    props: { label: '街道' }
  },
];

toggle() {
  this.fields[0].hide = !this.fields[0].hide;
}

3. 保留隐藏字段的值

默认情况下，隐藏字段的值会被清除。如需保留，有两种方式：

针对单个字段：

{
  key: 'text',
  type: 'input',
  resetOnHide: false
}

全局设置：

provideFormlyCore({
  extras: {
    resetFieldOnHide: false,
  },
})

监听表达式变化

ngx-formly提供了监听表达式变化的机制，通过options.fieldChanges可以订阅字段变化事件。

事件对象结构

| 属性 | 描述 | |----------|--------------------------| | field | 触发事件的字段实例 | | type | 事件类型(expressionChanges) | | property | 变化的表达式属性名 | | value | 表达式的新值 |

示例：监听字段显示状态

{
  key: 'city',
  type: 'input',
  expressions: {
    hide: (field) => !field.model?.country
  },
  hooks: {
    onInit: (field) => {
      return field.options.fieldChanges.pipe(
        filter(e => e.type === 'expressionChanges'
          && e.field === field
          && e.property === 'hide'
          && e.value === false
        ),
        tap(e => console.log('城市字段已显示', e)),
      )
    }
  }
}