or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdfield-components.mdfield-types.mdindex.mdjson-schema.mdselect.mdservices.mdtesting.mdutilities.mdvalidation.md
tile.json

tessl/npm-ngx-formly--core

Core package of ngx-formly - a dynamic (JSON powered) form library for Angular that brings unmatched maintainability to your application's forms

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ngx-formly/core@7.0.x

To install, run

npx @tessl/cli install tessl/npm-ngx-formly--core@7.0.0

index.mddocs/

NGX-Formly Core

NGX-Formly Core is the foundational package of the ngx-formly library, providing essential infrastructure for building dynamic, JSON-powered forms in Angular applications. It offers automatic form generation from JSON schemas, custom field types, validation rules, wrappers, and extensions built on top of Angular Reactive Forms.

Package Information

  • Package Name: @ngx-formly/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ngx-formly/core

Core Imports

import { FormlyModule, FormlyFieldConfig, FormlyFormOptions } from "@ngx-formly/core";

For standalone components:

import { FormlyForm, FormlyField, provideFormlyCore } from "@ngx-formly/core";

Basic Usage

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit(model)">
      <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  form = new FormGroup({});
  model = { email: '', name: '' };
  fields: FormlyFieldConfig[] = [
    {
      key: 'email',
      type: 'input',
      props: {
        label: 'Email',
        placeholder: 'Enter email',
        required: true,
      },
    },
    {
      key: 'name',
      type: 'input',
      props: {
        label: 'Name',
        placeholder: 'Enter name',
        required: true,
      },
    },
  ];

  onSubmit(model: any) {
    console.log(model);
  }
}

Architecture

NGX-Formly Core is built around several key components:

  • Form Components: FormlyForm and FormlyField for rendering dynamic forms
  • Configuration System: Extensible configuration for field types, wrappers, and validators
  • Services: FormlyConfig for global configuration and FormlyFormBuilder for form construction
  • Extension System: Plugin architecture for extending form behavior
  • Type System: Base classes for creating custom field types and wrappers

Capabilities

Configuration & Module Setup

Module setup, configuration functions, and dependency injection for integrating Formly into Angular applications.

class FormlyModule {
  static forRoot(config?: ConfigOption): ModuleWithProviders<FormlyModule>;
  static forChild(config?: ConfigOption): ModuleWithProviders<FormlyModule>;
}

function provideFormlyCore(configs?: ConfigOption | ConfigOption[]): Provider;

Configuration & Module Setup

Field Components

Core components for rendering dynamic forms with field configuration support.

@Component({ selector: 'formly-form' })
export class FormlyForm {
  @Input() form: FormGroup | UntypedFormGroup;
  @Input() fields: FormlyFieldConfig[];
  @Input() model: any;
  @Input() options: FormlyFormOptions;
}

@Component({ selector: 'formly-field' })
export class FormlyField {
  @Input() field: FormlyFieldConfig;
}

Field Components

Field Types

Base classes and interfaces for creating custom field types, array types, and wrappers.

export abstract class FieldType<F extends FormlyFieldConfig = FormlyFieldConfig> {
  field: F;
  formControl: AbstractControl;
  to: F['props'];
  showError?: boolean;
  id?: string;
  formState?: any;
}

export abstract class FieldArrayType<F extends FormlyFieldConfig = FormlyFieldConfig> extends FieldType<F> {
  add(i?: number, initialModel?: any, options?: FormlyFieldConfig): void;
  remove(i: number): void;
}

Field Types

Services

Core services for configuration management and form building functionality.

@Injectable()
export class FormlyConfig {
  addConfig(config: ConfigOption): void;
  setType(options: FieldTypeConfig | FieldTypeConfig[]): void;
  setWrapper(options: WrapperOption | WrapperOption[]): void;
  setValidator(options: ValidatorOption | ValidatorOption[]): void;
  getType(name: string): FieldTypeConfig;
  getValidator(name: string): ValidatorOption;
  getWrapper(name: string): WrapperOption;
}

@Injectable()
export class FormlyFormBuilder {
  buildForm(form: FormGroup | UntypedFormGroup, fields: FormlyFieldConfig[], model: any, options: FormlyFormOptions): void;
}

Services

Validation

Validation system with custom validators, validation messages, and error handling.

@Component({ selector: 'formly-validation-message' })
export class FormlyValidationMessage {
  @Input() field: FormlyFieldConfig;
}

interface ValidatorOption {
  name: string;
  validation: ValidatorFn | AsyncValidatorFn;
  options?: { [id: string]: any };
}

Validation

Utilities

Utility functions and helpers for form manipulation, data binding, and reactive programming.

function defineHiddenProp(field: any, prop: string, defaultValue: any): void;
function getFieldValue(field: FormlyFieldConfig): any;
function reverseDeepMerge(dest: any, ...args: any[]): any;
function clone(value: any): any;
function hasKey(field: FormlyFieldConfig): boolean;

Utilities

JSON Schema Integration

JSON Schema support for automatic form generation from schema definitions.

class FormlyJsonschema {
  toFieldConfig(schema: JSONSchema7, options?: FormlyJsonschemaOptions): FormlyFieldConfig;
}

interface FormlyJsonschemaOptions {
  map?: (mappedField: FormlyFieldConfig, mapSource: JSONSchema7) => FormlyFieldConfig;
  strict?: boolean;
}

JSON Schema

Select Options

Utilities for handling select field options with observable support.

@Pipe({ name: 'formlySelectOptions' })
export class FormlySelectOptionsPipe {
  transform(options: any, field?: FormlyFieldConfig): Observable<FormlySelectOption[]>;
}

interface FormlySelectOption {
  label: string;
  value: any;
  disabled?: boolean;
  group?: string;
}

Select Options

Testing Utilities

Utilities for testing Formly components and fields.

function createComponent<T>(options: IComponentOptions<T>): FixtureUtils;
function createFieldComponent(field: FormlyFieldConfig, config?: any): FixtureUtils;

interface FixtureUtils {
  fixture: ComponentFixture<any>;
  component: any;
  detectChanges(): void;
  query<T>(selector: string): T;
}

Testing

Types

Core Configuration Types

interface FormlyFieldConfig<Props = FormlyFieldProps & { [additionalProperties: string]: any }> {
  key?: string | number | (string | number)[];
  type?: string | Type<FieldType>;
  props?: Props;
  templateOptions?: FormlyTemplateOptions; // @deprecated
  defaultValue?: any;
  validators?: FormlyFieldConfigValidators;
  validation?: FormlyFieldConfigValidators;
  asyncValidators?: FormlyFieldConfigValidators;
  hide?: boolean | FieldExpression<boolean>;
  hideExpression?: boolean | string | ((field: FormlyFieldConfig) => boolean);
  resetOnHide?: boolean;
  expressions?: FieldExpressions;
  className?: string;
  fieldGroupClassName?: string;
  fieldGroup?: FormlyFieldConfig[];
  fieldArray?: FormlyFieldConfig | ((field: FormlyFieldConfig) => FormlyFieldConfig);
  template?: string;
  wrappers?: (string | Type<FieldWrapper>)[];
  parsers?: Array<(value: any, field: FormlyFieldConfig) => any>;
  modelOptions?: {
    debounce?: { default: number } & { [key: string]: number };
    updateOn?: 'change' | 'blur' | 'submit';
  };
  hooks?: FormlyHookConfig;
  focus?: boolean;
  id?: string;
  name?: string;
  
  // Readonly properties set by the system
  readonly model?: any;
  readonly parent?: FormlyFieldConfig;
  readonly options?: FormlyFormOptions;
  readonly form?: UntypedFormGroup | UntypedFormArray;
  readonly formControl?: AbstractControl;

  // Method for accessing child fields
  get?(key: FormlyFieldConfig['key']): FormlyFieldConfig;
}

interface FormlyFormOptions {
  formState?: any;
  fieldChanges?: Subject<FormlyValueChangeEvent>;
  fieldTransform?: (fields: FormlyFieldConfig[], model: any, form: FormGroup | UntypedFormGroup, options: FormlyFormOptions) => FormlyFieldConfig[];
  showError?: (field: FormlyFieldConfig) => boolean;
  resetOnHide?: boolean;
  parentForm?: FormGroupDirective | null;
  updateInitialValue?: (model?: any) => void;
  resetModel?: (model?: any) => void;
  checkExpressions?: (field: FormlyFieldConfig, ignoreCache?: boolean) => void;
  detectChanges?: (field: FormlyFieldConfig) => void;
  build?: (field?: FormlyFieldConfig) => FormlyFieldConfig[];
  _resolver?: ComponentFactoryResolver;
  _viewContainerRef?: ViewContainerRef;
  _markForCheck?: (field: FormlyFieldConfig) => void;
  _hiddenFieldsForCheck?: FormlyFieldConfig[];
  _initialModel?: any;
}

interface FormlyFieldProps {
  [additionalProperties: string]: any;
  label?: string;
  placeholder?: string;
  description?: string;
  hidden?: boolean;
  disabled?: boolean;
  required?: boolean;
  readonly?: boolean;
  attributes?: { [key: string]: any };
}

interface ConfigOption {
  types?: TypeOption[];
  wrappers?: WrapperOption[];
  validators?: ValidatorOption[];
  extensions?: ExtensionOption[];
  validationMessages?: ValidationMessageOption[];
  extras?: FormlyConfigExtras;
  presets?: PresetOption[];
}

interface TypeOption {
  name: string;
  component?: Type<FieldType>;
  wrappers?: string[];
  extends?: string;
  defaultOptions?: FormlyFieldConfig;
}

interface WrapperOption {
  name: string;
  component: Type<FieldWrapper>;
  types?: string[];
}

interface ValidatorOption {
  name: string;
  validation: FieldValidatorFn;
  options?: { [id: string]: any };
}

interface ExtensionOption {
  name: string;
  extension: FormlyExtension;
}

interface FormlyExtension<F extends FormlyFieldConfig = FormlyFieldConfig> {
  priority?: number;
  prePopulate?(field: F): void;
  onPopulate?(field: F): void;
  postPopulate?(field: F): void;
}

interface FormlyHookConfig {
  onInit?: FormlyHookFn | ((field: FormlyFieldConfig) => Observable<any>);
  onChanges?: FormlyHookFn;
  afterContentInit?: FormlyHookFn;
  afterViewInit?: FormlyHookFn;
  onDestroy?: FormlyHookFn;
}

type FormlyHookFn = (field: FormlyFieldConfig) => void;

interface FormlyValueChangeEvent {
  field: FormlyFieldConfig;
  type: string;
  value: any;
}

type FormlyAttributeEvent = (field: FormlyFieldConfig, event?: Event) => void;

interface FormlyTemplate {
  name: string;
  template: TemplateRef<any>;
}

interface FormlyFieldConfigCache extends FormlyFieldConfig {
  _expressions?: { [property: string]: any };
  _hide?: boolean;
  _componentRefs?: ComponentRef<FieldType>[];
  _keyPath?: { key: FormlyFieldConfig['key']; index?: number };
}

type FieldValidatorFn = (control: AbstractControl, field: FormlyFieldConfig, options?: any) => ValidationErrors | null;

interface FieldExpressions {
  [property: string]: string | ((field: FormlyFieldConfig) => any) | Observable<any>;
}

type FieldExpression<T = any> = string | ((field: FormlyFieldConfig) => T) | Observable<T>;

interface FormlyConfigExtras {
  checkExpressionOn?: 'modelChange' | 'changeDetectionCheck';
  lazyRender?: boolean;
  resetFieldOnHide?: boolean;
  renderFormlyFieldElement?: boolean;
  showError?: (field: FieldType) => boolean;
  immutable?: boolean;
  fieldTransform?: (fields: FormlyFieldConfig[], model: any, form: UntypedFormGroup | UntypedFormArray, options: FormlyFormOptions) => FormlyFieldConfig[];
  removeFormControlOnHide?: boolean;
}

interface PresetOption {
  name: string;
  config: ConfigOption;
}

interface ValidationMessageOption {
  name: string;
  message: string | ((error: any, field: FormlyFieldConfig) => string);
}