How to use @ngx-formly/core - 10 common examples

MatDialogModule,
  MatSidenavModule,
  DragDropModule,
];

@NgModule({
  imports: [
    SharedModule,
    BreadcrumbsModule,
    [...matModules],
    AppConfirmModule,
    TruncateModule,
    HelperModule,
    ToolbarModule,
    QuickpanelModule,
    FormlyModule.forChild({}),
    FormlyMaterialModule,
    RouterModule.forChild([
      /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */
      {
        path: '',
        component: AdminLayoutComponent,
        // canActivate: [AuthGuard],
        canActivate: [AdminGuard],
        data: { title: 'Admin', depth: 1, roles: ['ROLE_ADMIN'] },
        children: [
          { path: '', component: OverviewComponent, data: { title: 'Overview', depth: 2 } },
          {
            path: 'subscriptions',
            component: SubscriptionsComponent,
            data: { title: 'Subscriptions', depth: 3 },
            children: [

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;

it('should ignore default debounce when using "blur" or "submit"', () => {
      const { field } = renderComponent({
        key: 'foo',
        type: 'input',
        modelOptions: {
          debounce: { default: 5 },
          updateOn: 'blur',
        },
      });

      const [spy, subscription] = createFieldChangesSpy(field);

      field.formControl.setValue('15');
      expect(spy).toHaveBeenCalled();
      subscription.unsubscribe();
    });

import { DropdownModule } from 'primeng/dropdown';
import { FormlySelectModule as FormlyCoreSelectModule } from '@ngx-formly/core/select';

import { FormlyFormFieldModule } from '@ngx-formly/primeng/form-field';
import { FormlyFieldSelect } from './select.type';

@NgModule({
  declarations: [FormlyFieldSelect],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    DropdownModule,

    FormlyFormFieldModule,
    FormlyCoreSelectModule,
    FormlyModule.forChild({
      types: [
        {
          name: 'select',
          component: FormlyFieldSelect,
          wrappers: ['form-field'],
        },
      ],
    }),
  ],
})
export class FormlySelectModule {}

<form>
        
        
      </form>
    `,
    inputs,
    config,
    declarations: [ParentComponent, ChildComponent],
    imports: [
      FormlyInputModule,
      FormlyModule.forChild({
        types: [
          {
            name: 'parent',
            component: ParentComponent,
          },
          {
            name: 'child',
            component: ChildComponent,
          },
        ],
      }),
    ],
    ...config,
  });
};

import { CommonModule } from '@angular/common';
import { FormlyModule } from '@ngx-formly/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlySelectModule } from '@ngx-formly/core/select';
import { FormlyFormFieldModule } from '@ngx-formly/kendo/form-field';
import { FormlyFieldRadio } from './radio.type';

@NgModule({
  declarations: [FormlyFieldRadio],
  imports: [
    CommonModule,
    ReactiveFormsModule,

    FormlyFormFieldModule,
    FormlySelectModule,
    FormlyModule.forChild({
      types: [
        {
          name: 'radio',
          component: FormlyFieldRadio,
          wrappers: ['form-field'],
        },
      ],
    }),
  ],
})
export class FormlyRadioModule {}

import { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
import { MatRadioModule } from '@angular/material/radio';

import { FormlyFieldRadio } from './radio.type';

@NgModule({
  declarations: [FormlyFieldRadio],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatRadioModule,

    FormlyMatFormFieldModule,
    FormlySelectModule,
    FormlyModule.forChild({
      types: [{
        name: 'radio',
        component: FormlyFieldRadio,
        wrappers: ['form-field'],
      }],
    }),
  ],
})
export class FormlyMatRadioModule { }

import { CommonModule } from '@angular/common';
import { FormlyModule } from '@ngx-formly/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
import { FormlyFormFieldModule } from '@ngx-formly/primeng/form-field';

import { FormlyFieldCheckbox } from './checkbox.type';

@NgModule({
  declarations: [FormlyFieldCheckbox],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    CheckboxModule,
    FormlyFormFieldModule,
    FormlyModule.forChild({
      types: [
        {
          name: 'checkbox',
          component: FormlyFieldCheckbox,
          wrappers: ['form-field'],
        },
      ],
    }),
  ],
})
export class FormlyCheckboxModule {}