Передача пользовательских типов в модуль Dynami c, который импортирует FormlyModule и регистрирует типы по умолчанию - PullRequest
Новая
       39

Передача пользовательских типов в модуль Dynami c, который импортирует FormlyModule и регистрирует типы по умолчанию

1 голос
/ 27 апреля 2020

Я использую модуль формы Dynami c, который импортирует FormlyModule (https://github.com/ngx-formly/ngx-formly) и определяю некоторые типы / компоненты по умолчанию, которые будут регистрироваться при импорте этого модуля Dynami c. Что мне нужно, так это иметь возможность передавать пользовательские типы за пределы модуля dynamici c (а не только типов, определенных в модуле config file form модуля dynamici c) при импорте этого модуля dynamici c.

Модульная структура

enter image description here

Dynami c Модуль 

@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: [
            ],
        };
    }
}

dynamici c -form-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, будут зарегистрированы формально. Я хочу иметь опции для передачи дополнительных типов, когда мне нужно, например: 

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

можно каким-то образом с этим подходом определить метод stati c forRoute / forChild и зарегистрировать эти типы в FormlyModule?

1 Ответ

0 голосов
/ 27 апреля 2020

Я нашел ответ. Нам нужно определить метод forChild в модуле dynamici c, который будет регистрировать новые формальные типы. Если мы хотим, чтобы только определенное было зарегистрировано, мы будем вызывать просто 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)];
    }
}
...