DOCSEARCHbyAlgolia
Submit Docs

ngx-formly Documentation

website·Indexed 33 days ago

https://formly.dev

A library for building dynamic forms in Angular. Features include JSON Schema support, custom field types, wrappers, extensions, and validation. Provides UI integrations for Bootstrap, PrimeNG, Material, NG-ZORRO, Ionic, Kendo, and NativeScript. Version 7 requires Angular 18.

Tokens
21K
Snippets
184
Records
248
Agent score
68%

What's inside Formly

  1. Overview of Formly for Angular

    Formly is a dynamic, JSON-powered form library for Angular built on top of Angular Reactive Forms. It allows for automatic form generation and is highly extensible via custom field types, validation, wrappers, and extensions. It supports both Formly Schema (core) and JSON Schema.

  2. Implement cross-cutting functionality with Custom Extensions

    Extensions in Formly allow you to implement logic that applies to all fields globally. They hook into the form construction process via three methods executed in this specific order: prePopulate, onPopulate, and postPopulate.

  3. Use Standalone Components with Formly v7

    Formly v7 introduces support for standalone components. While the traditional NgModule API (e.g., FormlyModule, FormlyBootstrapModule) remains supported, you can now use the Standalone Alternative API for configuration and UI integration.
    NgModule ApiStandalone Alternative Api
    FormlyModuleFormlyForm
    FormlyModule.forRootprovideFormlyCore
    FormlyModule.forChildprovideFormlyConfig
    FormlyBootstrapModulewithFormlyBootstrap
    FormlyMaterialModulewithFormlyMaterial
    Formly{...UI}ModulewithFormly{...UI}

  4. Import FormlyFormFieldModule for Ionic

    To use Ionic-specific form field wrappers and attributes in an ngx-formly project, import the FormlyFormFieldModule from the @ngx-formly/ionic/form-field entry point.
    import { FormlyFormFieldModule } from '@ngx-formly/ionic/form-field';

  5. Install and import FormlyMatNativeSelectModule

    To use native select fields in an Angular Material Formly project, import the FormlyMatNativeSelectModule from the @ngx-formly/material/native-select package.
    import { FormlyMatNativeSelectModule } from '@ngx-formly/material/native-select';

  6. Implement conditional rendering with the hide property

    To conditionally show or hide a field, use the hide property. This can be set as a static boolean, or dynamically via the expressions object using a string, function, or boolean value.
    // String expression: hide if model.name is empty
{
  key: 'iLikeTwix',
  type: 'checkbox',
  props: { label: 'I like twix' },
  expressions: { hide: '!model.name' },
}

// Function expression: hide if city is '123'
{
  key: 'country',
  type: 'input',
  props: { label: 'Country' },
  expressions: {
    hide: (field: FormlyFieldConfig) => field.model?.city === "123",
  }
}

  7. Install and import FormlyToggleModule for Ionic

    To use toggle fields in an Ionic application with ngx-formly, import the FormlyToggleModule from the @ngx-formly/ionic/toggle package.
    import { FormlyToggleModule } from '@ngx-formly/ionic/toggle';

  8. Implement a basic form with <formly-form>

    The <formly-form> component is the main container used to build and render form fields. It requires three primary inputs:

    • fields: An array of FormlyFieldConfig objects defining the form structure.
    • form: The FormGroup instance used to track model values and validation status.
    • model: The data object represented by the form.
    <form [formGroup]="form" (ngSubmit)="onSubmit(model)">
  <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

  9. Use Formly Field Presets in form configurations

    To use a defined preset in a form, use a 'pseudo-type' by prefixing the preset name with a # character in the type property. This substitutes the field's properties with those defined in the preset. You can override specific properties (such as labels) by defining them alongside the pseudo-type.
    // Basic usage of a preset
fieldConfig = [
  {
    type: '#firstName'
  }
];

// Using a preset with property overrides
fieldConfig = [
  {
    type: '#firstName',
    props: {
      label: 'alternative label'
    }
  }
];

  10. Render dynamic HTML templates in ngx-formly

    Due to Angular limitations regarding the browser-side compiler, rendering dynamic HTML templates at runtime is not directly possible. Instead, use one of these three alternatives: 1. Create a Custom component type. 2. Use expressions to return a template string. 3. Use an inline type with an ng-template defined in the component template.
    // Option 2: Using expressions
{
  expressions: {
    template: field => `<div">${field.model.label}</div
angle`
  }
}

// Option 3: Using inline type
// In Component Template:
// <formly-form [form]="form" [fields]="fields" [model]="model">
//   <ng-template formlyTemplate="custom-inline-type" let-field>
//     Hello {{ field.props.name }}
//   </ng-template>
// </formly-form>

// In Component Class:
fields: FormlyFieldConfig[] = [
  {
    type: 'custom-inline-type',
    props: {
      name: 'World !!!',
    }
  }
];

  11. Use formState for inter-field communication

    The formState property is available to all fields in a Formly form. It serves as a mechanism for fields to communicate with one another and share state without modifying the primary data model.

  12. Install and import FormlySelectModule for Kendo UI

    To use the Kendo UI Select component within ngx-formly, import the FormlySelectModule from the @ngx-formly/kendo/select package into your Angular module.
    import { FormlySelectModule } from '@ngx-formly/kendo/select';