javascript - 在导入 FormlyModule 并注册默认类型的动态模块中传递自定义类型

问题描述

我正在使用导入 FormlyModule ( https://github.com/ngx-formly/ngx-formly ) 的动态表单模块，并定义了一些在导入此动态模块时将注册的默认类型/组件。我需要的是在导入此动态模块时可以选择在动态模块之外传递自定义类型（不仅仅是配置文件中定义的类型动态模块）。

模块结构

动态模块

@NgModule({
    imports: [
        CommonModule,
        AcUiModule,
        ReactiveFormsModule,
        FormlySelectModule,
        HttpClientModule,
        FormlyModule.forRoot(FORM_CONFIG),
    ],
    declarations: [
        ...
    ],
    exports: [FormsModule, ReactiveFormsModule, FormlyModule, FormlyBootstrapModule],
})
export class AcDynamicFormModule {
    static forRoot(config?: Partial<any>): ModuleWithProviders<AcDynamicFormModule> {
        return {
            ngModule: AcDynamicFormModule,
            providers: [
            ],
        };
    }
}

动态形式-config.model.ts

export const FORM_CONFIG: ConfigOption = {
    types: [
        {
            name: 'input',
            component: CustomInputFieldComponent,
            wrappers: ['form-field'],
        }
        ....
    ],
    wrappers: [
        {
            name: 'form-field',
            component: AcWrapperFormField,
        },
    ],
    validationMessages: [
        { name: 'required', message: 'This field is required' }
    ],
    validators: [{ name: 'emailvalidation', validation: emailValidation }],
};

自定义输入字段

@Component({
    selector: 'ac-input-field',
    template: `
        <input
            *ngIf="type !== 'number'; else numberTmp"
            [type]="type"
            [formControl]="formControl"
            class="form-control mb-2"
            [formlyAttributes]="field"
            [class.is-invalid]="showError"
        />
        <ng-template #numberTmp>
            <input
                type="number"
                [formControl]="formControl"
                class="form-control"
                [formlyAttributes]="field"
                [class.is-invalid]="showError"
            />
        </ng-template>
    `,
})
export class CustomInputFieldComponent extends FieldType {
    get type() {
        return this.to.type || 'text';
    }
}

用法

@NgModule({
    declarations: [AppComponent, DynamicFormComponent],
    imports: [
        ...
        AcDynamicFormModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

正如我们现在使用的那样，只有在 config 中定义的类型才会被 formly 注册。我希望在需要时可以选择传递其他类型，例如：

 AcDynamicFormModule.forRoute({types: [{name: 'picker', component: CustomPickerComponent]}),

用这种方法有可能以某种方式定义静态 forRoute/forChild 方法并在 FormlyModule 中注册这些类型？

标签： javascriptangulartypescriptmodulengx-formly

我找到了答案。我们需要在动态模块中定义 forChild 方法来注册新的形式类型。如果我们只想定义为注册，我们将只调用 AcDynamicFormModule 否则

 AcDynamicFormModule.forChild({types: [{{
            name: 'custom-comp',
            component: CustomTypeComponent,
            wrappers: ['form-field'],
        }}]})


@NgModule({
    imports: [
        ...
        FormlyModule.forRoot(AC_FORM_CONFIG)
    ],
    declarations: [
        ....
    ],
    exports: [FormsModule, ReactiveFormsModule, FormlyModule, FormlyBootstrapModule],
})
export class AcDynamicFormModule {
    public static forChild(config: ConfigOption = {}): ModuleWithProviders[] {
        return [{ ngModule: AcDynamicFormModule, providers: [] }, FormlyModule.forChild(config)];
    }
}

javascript - 在导入 FormlyModule 并注册默认类型的动态模块中传递自定义类型

问题描述

解决方案

推荐阅读