Angular 16独立组件中配置Formly自定义组件的方法

在Angular 16+的独立组件模式下，FormlyModule.forRoot()返回的ModuleWithProviders类型不再适用于组件的imports数组——这是NgModule时代的API，独立模式的imports仅接受组件/指令/管道类、独立模块或可注入对象。Formly 6+针对独立组件提供了provideFormly()函数来替代原有配置方式，具体修改如下：

1. 替换配置API #

将原FormlyModule.forRoot()的配置对象传入provideFormly()，并把它放在组件的providers数组中（而非imports）。

旧的NgModule配置 #

@NgModule({
  imports: [
    FormlyModule.forRoot({
      types: [
        {
          name: 'input',
          component: CustomInputComponent,
          wrappers: ['test-wrapper'],
        }
      ],
      validators: [
        {
          name: 'mandatory',
          validation: CustomMandatoryValidator,
        },
      ],
      wrappers: [
        {
          name: 'test-wrapper',
          component: TestWrapperComponent,
        },
      ],
    })
  ]
})

修改后的独立组件配置 #

import { provideFormly } from '@ngx-formly/core';
import { FormlyModule } from '@ngx-formly/core';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormlyModule, ReactiveFormsModule], // 仅导入基础FormlyModule
  providers: [
    provideFormly({
      types: [
        {
          name: 'input',
          component: CustomInputComponent,
          wrappers: ['test-wrapper'],
        }
      ],
      validators: [
        {
          name: 'mandatory',
          validation: CustomMandatoryValidator,
        },
      ],
      wrappers: [
        {
          name: 'test-wrapper',
          component: TestWrapperComponent,
        },
      ],
    }),
  ],
  template: `<form [formGroup]="form" (ngSubmit)="onSubmit()">...</form>`,
})
export class AppComponent {
  form = new FormGroup({});
  model = {};
  fields = [...]；
}

2. 全局配置（可选） #

如果希望Formly配置全局生效，可将provideFormly()放在bootstrapApplication的providers中，避免每个组件重复配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideFormly } from '@ngx-formly/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideFormly({
      // 全局Formly配置项
      types: [...],
      validators: [...],
      wrappers: [...],
    }),
  ],
});

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