如何在angular 4中使用自定义类型的FormlyConfig

在Angular 4中使用自定义类型的FormlyConfig，你可以按照以下步骤进行操作：

首先，确保你已经安装了Angular和Formly库，并且已经创建了一个Angular项目。
在你的Angular项目中，找到并打开app.module.ts文件。
在文件的顶部，引入FormlyModule和FormlyBootstrapModule：

import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';

然后，在@NgModule的imports数组中，添加FormlyModule和FormlyBootstrapModule：

@NgModule({
  imports: [
    // 其他模块
    FormlyModule.forRoot(),
    FormlyBootstrapModule,
  ],
  // 其他配置
})

接下来，在同一个文件中，创建一个自定义类型的配置函数。你可以将该函数命名为customTypeConfig，并在函数中定义自己的类型配置：

export function customTypeConfig(formlyConfig: FormlyConfig) {
  formlyConfig.addType({
    name: 'custom',
    component: CustomComponent,
    wrappers: ['form-field'],
  });
}

在上述代码中，我们定义了一个名为custom的自定义类型，并将其关联到一个叫做CustomComponent的组件上。你可以根据自己的需求来修改这些配置。

然后，在@NgModule的providers数组中，将自定义类型的配置函数添加进去：

@NgModule({
  imports: [
    // 其他模块
    FormlyModule.forRoot(),
    FormlyBootstrapModule,
  ],
  providers: [
    // 其他提供者
    { provide: FORMLY_CONFIG, multi: true, useFactory: customTypeConfig },
  ],
})

通过将自定义类型的配置函数添加为FORMLY_CONFIG提供者，我们告诉FormlyConfig要使用我们自定义的类型配置。

最后，你可以在需要使用自定义类型的组件中，引入FormBuilder和FormlyForm：

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig, FormlyFormBuilder } from '@ngx-formly/core';

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <formly-form [form]="form" [fields]="fields"></formly-form>
      <button type="submit">提交</button>
    </form>
  `,
})
export class MyFormComponent {
  form: FormGroup;
  fields: FormlyFieldConfig[];

  constructor(private formlyBuilder: FormlyFormBuilder) {
    this.form = new FormGroup({});
    this.fields = [
      {
        key: 'name',
        type: 'custom', // 使用自定义类型
        templateOptions: {
          label: '名称',
          placeholder: '请输入名称',
        },
      },
    ];
  }

  onSubmit() {
    // 处理表单提交
  }
}

在上述代码中，我们使用了FormlyFieldConfig来定义我们的表单字段，其中的type属性设置为我们自定义的类型custom。你可以根据自己的需求来定义更多的表单字段。

这样，我们就可以在Angular 4中使用自定义类型的FormlyConfig了。请记住，在实际使用中，你可能需要根据你的需求进行一些适当的修改和调整。