How to use the @ngx-formly/core.FormlyModule.forRoot function in @ngx-formly/core

import { TranslateService } from '@ngx-translate/core';

import { registerTranslateExtension } from './translate.extension';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'assets/i18n/', '_json');
}

import { AppComponent } from './app.component';
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot(),

    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
  ],
  declarations: [
    AppComponent,

}),
    NgxsRouterPluginModule.forRoot(),
    AuthModule.forRoot(),
    // OidcModule.forRoot({
    //   providerConfig: { ...environment.auth, provider: OidcProvider.Keycloak },
    //   initConfig: {
    //     onLoad: OidcOnLoad.CheckSso,
    //     flow: OidcFlow.Standard,
    //   },
    //   resourceInterceptorConfig: {
    //     allowedUrls: [environment.API_BASE_URL, environment.DOCS_BASE_URL],
    //   },
    //   postLoginRedirectUri: environment.baseUrl + 'dashboard',
    //   postLogoutRedirectUri: environment.baseUrl + 'home',
    // }),
    FormlyModule.forRoot(),
    environment.plugins,
  ],
  providers: [
    GoogleAnalyticsService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      multi: true,
    },
    {
      provide: APP_INITIALIZER,
      useFactory: appConfigInitializerFn,
      deps: [AppConfigService],
      multi: true,
    },
    {

export function createComponent({
  template,
  inputs,
  config,
  detectChanges,
  imports,
  declarations,
  providers,
}: IComponentOptions) {
  TestBed.configureTestingModule({
    declarations: [TestComponent, ...(declarations || [])],
    imports: [ReactiveFormsModule, FormlyModule.forRoot(config), ...(imports || [])],
    providers: providers || [],
  }).overrideComponent(TestComponent, { set: { template } });

  const fixture = TestBed.createComponent(TestComponent);
  Object.keys(inputs).forEach(input => {
    fixture.componentInstance[input] = inputs[input];
  });

  setInputs(fixture, inputs, detectChanges);

  interface IFormlyDebugElement extends DebugElement {
    readonly nativeElement: E;
  }

  type FixtureUtils = T & {
    fixture: ComponentFixture;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';

import { PanelWrapperComponent } from './panel-wrapper.component';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot({
      wrappers: [{ name: 'panel', component: PanelWrapperComponent }],
    }),
  ],
  declarations: [AppComponent, PanelWrapperComponent],
})
export class AppModule {}

beforeEach(async () => {
    const notificationsServiceSpy = jasmine.createSpyObj('NotificationsService', ['addError', 'addSuccess']);
    const dynamicFormServiceSpy = jasmine.createSpyObj('DynamicFormService', ['getSettings', 'getSettingsFromBackend$', 'registerForm', 'submit$']);

    await TestBed
      .configureTestingModule({
        imports: [
          CommonModule,
          HttpClientTestingModule,
          ReactiveFormsModule,
          FormlyModule.forRoot({
            types: [
              { name: 'textInput', component: TextInputComponent },
              { name: 'integerInput', component: IntegerInputComponent },
              { name: 'selectInput', component: SelectInputComponent },
              { name: 'booleanInput', component: BooleanInputComponent },
              { name: 'dateInput', component: DateInputComponent },
              { name: 'formattableInput', component: FormattableTextareaInputComponent },
            ],
            wrappers: [
              {
                name: "op-dynamic-field-group-wrapper",
                component: DynamicFieldGroupWrapperComponent,
              },
              {
                name: 'op-dynamic-field-wrapper',
                component: DynamicFieldWrapperComponent,

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
import { MatStepperModule } from '@angular/material/stepper';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatStepperModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot({
      validationMessages: [{ name: 'required', message: 'This field is required' }],
    }),
  ],
  declarations: [AppComponent],
})
export class AppModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';

import { FormlyMatToggleModule } from '@ngx-formly/material/toggle';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormlyModule.forRoot({
      validationMessages: [{ name: 'required', message: 'This field is required' }],
    }),

    FormlyMatToggleModule,
  ],
  declarations: [AppComponent],
})
export class AppModule {}

beforeEach(() => {
    TestComponent = MockComponent({ selector: 'formly-test-cmp' });
    TestBed.configureTestingModule({
      declarations: [TestComponent, RepeatComponent],
      imports: [
        FormlyModule.forRoot({
          types: [
            { name: 'input', component: TestComponent },
            { name: 'checkbox', component: TestComponent },
            { name: 'repeat', component: RepeatComponent },
          ],
          wrappers: [{ name: 'label', component: TestComponent, types: ['input'] }],
          validators: [{ name: 'required', validation: Validators.required }],
        }),
      ],
    });
  });

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';

import { AppComponent } from './app.component';
import { FormlyFieldButton } from './button-type.component';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot({
      types: [
        {
          name: 'button',
          component: FormlyFieldButton,
          wrappers: ['form-field'],
          defaultOptions: {
            templateOptions: {
              btnType: 'default',
              type: 'button',
            },
          },
        },
      ],
    }),
  ],
  declarations: [

import { AppComponent } from './app.component';

export function animationExtension(field: FormlyFieldConfig) {
  if (field.wrappers && field.wrappers.includes('animation')) {
    return;
  }

  field.wrappers = ['animation', ...(field.wrappers || [])];
}

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormlyBootstrapModule,
    FormlyModule.forRoot({
      wrappers: [
        { name: 'animation', component: AnimationWrapperComponent },
      ],
      extensions: [
        { name: 'animation', extension: { onPopulate: animationExtension } },
      ],
    }),
  ],
  declarations: [
    AppComponent,
    AnimationWrapperComponent,
  ],
})
export class AppModule { }