ngx-formly 自定义扩展开发指南：实现跨字段功能复用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00976/article/details/148756590

ngx-formly 自定义扩展开发指南：实现跨字段功能复用

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

什么是Formly扩展

在ngx-formly中，扩展(Extension)是一种强大的功能机制，它允许开发者实现横切关注点功能，这些功能可以应用于所有表单字段。理解扩展机制将极大提升你使用ngx-formly的能力，因为formly本身的很多核心逻辑都是基于扩展实现的。

扩展特别适合处理以下场景：

为所有字段添加默认属性（如默认标签）
实现表单国际化支持
添加统一的字段动画效果
实现跨字段的验证逻辑
自定义字段生命周期钩子

扩展的执行时机

FormlyExtension接口提供了三个关键的生命周期方法，它们按以下顺序在表单构建过程中被调用：

prePopulate - 在字段初始化前执行
onPopulate - 在字段初始化时执行
postPopulate - 在字段初始化完成后执行

这种精细的生命周期控制让开发者可以在不同阶段对字段进行定制。

创建自定义扩展实战

下面我们通过一个具体示例，演示如何创建一个为字段添加默认标签的扩展。

1. 定义扩展实现

首先创建扩展的实现文件default-label-extension.ts：

import { FormlyExtension } from '@ngx-formly/core';

export const defaultLabelExtension: FormlyExtension = {
  prePopulate(field): void {
    // 如果字段已定义label则不做处理
    if (field.props?.label) {
      return;
    }
    
    // 为未定义label的字段设置默认label
    field.props = {
      ...field.props,
      label: '默认标签'
    }
  },
};

这里我们选择使用对象字面量方式实现扩展，这是最简单的实现方式。如果你的扩展需要依赖其他服务（如国际化服务），则应该使用类实现方式。

2. 注册扩展

接下来在应用配置中注册这个扩展：

import { provideFormlyCore } from '@ngx-formly/core';
import { defaultLabelExtension } from './default-label-extension';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFormlyCore({
      extensions: [
        {
          name: 'default-label',  // 扩展名称
          extension: defaultLabelExtension  // 扩展实现
        }
      ]
    }),
  ],
};

3. 使用效果验证

现在创建表单字段时，未指定label的字段将自动获得默认标签：

fields: FormlyFieldConfig[] = [
  {
    key: 'name',
    type: 'input',
    props: {
      label: '姓名输入框'  // 这个字段会显示自定义label
    }
  },
  {
    key: 'age',
    type: 'input'  // 这个字段会自动显示"默认标签"
  }
];

扩展执行优先级控制

当应用中有多个扩展时，可能需要控制它们的执行顺序。可以通过priority属性来设置优先级：

provideFormlyCore({
  extensions: [
    {
      name: 'default-label',
      extension: defaultLabelExtension,
      priority: 3  // 数字越大执行越晚
    }
  ]
})

优先级规则说明：