我正在使用导入 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 中注册这些类型?