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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

NGX-Formly Core

Name: tessl/npm-ngx-formly--core
Author: tessl

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);
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/@ngx-formly/core@7.0.x
Publish Source: CLI
Badge