1

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

dynamic-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 {}

この時点で使用できるように、構成で定義されたタイプのみが正式に登録されます。必要に応じて追加の型を渡すオプションが必要です。たとえば、次のようになります。

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

このアプローチを使用して、静的な forRoute/forChild メソッドを定義し、それらのタイプを FormlyModule に登録することは何とか可能ですか?

4

1 に答える 1

1

答えが見つかりました。新しい正式な型を登録する動的モジュールで 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)];
    }
}
于 2020-04-27T12:42:17.020 に答える