Ngx Formly

https://formly.dev/docs
Admin
Ngx Formly is a dynamic form generation library for Angular that enables developers to build...
Tokens:29,542
Snippets:424
Trust Score:8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Formly Packages with ng add

Source: https://formly.dev/docs/guide/getting-started

Use `ng add` for recommended installation, optionally specifying a UI theme like bootstrap.

```bash
ng add @ngx-formly/schematics --ui-theme=bootstrap  

```

--------------------------------

### Install Formly Packages with npm

Source: https://formly.dev/docs/guide/getting-started

Install Formly core and a specific UI theme using npm. Replace 'bootstrap' with your desired theme.

```bash
npm install @angular/forms @ngx-formly/core @ngx-formly/bootstrap --save  

```

--------------------------------

### Form Data Example

Source: https://formly.dev/docs/examples/advanced/extending-field-types

This snippet shows the structure of form data, typically an object.

```javascript
[object Object]
```

--------------------------------

### Form State Example

Source: https://formly.dev/docs/examples/advanced/i18n-alternative

This snippet illustrates the current state of the form, specifically the selected language.

```javascript
Object{lang:"en"}
lang:"en"
```

--------------------------------

### Input with String Hints

Source: https://formly.dev/docs/examples/other/material-formfield-hint-align

Use hintStart and hintEnd properties with string values for alignment to the start and end respectively.

```typescript
hintStart: 'Start hint',
hintEnd: 'End hint'
```

--------------------------------

### Input with Description

Source: https://formly.dev/docs/examples/other/material-formfield-hint-align

The description field accepts strings and is aligned to the start. It can be used for additional information.

```typescript
description: 'This is a description.'
```

--------------------------------

### Empty Object Example

Source: https://formly.dev/docs/examples/advanced/extending-field-types

Represents an empty object, often used as a placeholder or initial state.

```javascript
Object{}
```

--------------------------------

### Use a Preset in a Form

Source: https://formly.dev/docs/guide/formly-field-presets

Access defined presets using pseudo-types prefixed with '#'. This example shows how to use the 'firstName' preset.

```typescript
fieldConfig = [
  ...
  {
    type: '#firstName'
  }
]

```

--------------------------------

### Form Data Example

Source: https://formly.dev/docs/examples/advanced/grid-integration

This represents the structure of the form data after submission, showing nested objects and arrays for investments.

```javascript
Object{name:"name1", surname:"surname1", investments:Array[6]}
name:"name1"
surname:"surname1"
investments:Array[6][Object, Object, Object, Object, Object, Object]
0:Object{investmentName:"project1", investmentDate:"", stockIdentifier:1}
investmentName:"project1"
investmentDate:""
stockIdentifier:1
1:Object{investmentName:"project2", investmentDate:"2004-06-20", stockIdentifier:2}
investmentName:"project2"
investmentDate:"2004-06-20"
stockIdentifier:2
2:Object{investmentName:"project3", investmentDate:"", stockIdentifier:3}
investmentName:"project3"
investmentDate:""
stockIdentifier:3
3:Object{investmentName:"project4", investmentDate:"", stockIdentifier:4}
investmentName:"project4"
investmentDate:""
stockIdentifier:4
4:Object{investmentName:"project5", investmentDate:"", stockIdentifier:5}
investmentName:"project5"
investmentDate:""
stockIdentifier:5
5:Object{investmentName:"project6", investmentDate:"", stockIdentifier:6}
investmentName:"project6"
investmentDate:""
stockIdentifier:6
```

--------------------------------

### Advanced Form Layout Example

Source: https://formly.dev/docs/examples/bootstrap-specific/advanced-layout

This example showcases how to use `fieldGroup` to create nested sections and `className` for custom styling in Formly forms.

```typescript
{
  key: 'advanced',
  fieldGroup: [
    {
      key: 'name',
      fieldGroup: [
        {
          key: 'firstName',
          type: 'input',
          templateOptions: {
            label: 'First Name'
          }
        },
        {
          key: 'lastName',
          type: 'input',
          templateOptions: {
            label: 'Last Name'
          }
        }
      ]
    },
    {
      key: 'address',
      templateOptions: {
        label: 'Address'
      },
      fieldGroup: [
        {
          key: 'street',
          type: 'input',
          templateOptions: {
            label: 'Street'
          }
        },
        {
          key: 'city',
          type: 'input',
          templateOptions: {
            label: 'City'
          }
        },
        {
          key: 'zip',
          type: 'input',
          templateOptions: {
            label: 'Zip'
          }
        }
      ]
    },
    {
      key: 'other',
      fieldGroup: [
        {
          key: 'otherInput',
          type: 'input',
          templateOptions: {
            label: 'Other Input'
          }
        },
        {
          key: 'otherCheckbox',
          type: 'checkbox',
          templateOptions: {
            label: 'Other Checkbox'
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Display Nested Formly Forms

Source: https://formly.dev/docs/examples/other/nested-formly-forms

This example shows how to nest formly-form components using custom templates. It requires defining the structure within the formly configuration.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'formly-nested-forms-example',
  template: `
    <formly-form [form]="form" [fields]="fields"></formly-form>
    <button type="submit" class="btn btn-primary">Submit</button>

    <h5>Form Value</h5>
    <pre>{{ form.value | json }}</pre>
  `,
})
export class FormlyNestedFormsExampleComponent {
  form = new FormGroup({});
  fields: FormlyFieldConfig[] = [
    {
      key: 'firstName',
      type: 'input',
      templateOptions: {
        label: 'First Name',
        placeholder: 'Enter your first name',
        required: true,
      },
    },
    {
      key: 'address',
      fieldGroup: [
        {
          key: 'town',
          type: 'input',
          templateOptions: {
            label: 'Town',
            placeholder: 'Enter your town',
            required: true,
          },
        },
      ],
    },
  ];
}

```

--------------------------------

### Define a Default Label Extension

Source: https://formly.dev/docs/guide/custom-formly-extension

Implement the `FormlyExtension` interface to create a custom extension. This example defines a `prePopulate` method to add a default label if none is provided.

```typescript
import { FormlyExtension } from '@ngx-formly/core';

export const defaultLabelExtension: FormlyExtension = {
  prePopulate(field): void {
    if (field.props?.label) {
      return;
    }
    field.props = {
      ...field.props,
      label: 'Default Label'
    }
  },
};

```

--------------------------------

### Define a 'firstName' Preset

Source: https://formly.dev/docs/guide/formly-field-presets

Import `provideFormlyPreset` and provide presets to `FormlyConfig` to define reusable field configurations. This example shows how to define a 'firstName' preset.

```typescript
export const appConfig: ApplicationConfig = {
  providers: [
    provideFormlyPreset(),
    provideFormlyCore({
      presets: [
        {
          name: 'firstName',
          config: {
            key: 'firstName',
            type: 'input',
            props: {
              label: 'First Name',
            },
          },
        },
      ],
    }),
  ],
};

```

--------------------------------

### Cascaded Select Form Example

Source: https://formly.dev/docs/examples/other/cascaded-select-json

This is a visual representation of the cascaded select form. It shows the UI elements for selecting Sport, Team, and Player.

```html
Sport  Soccer  Basketball 
Team 
Player 
Submit
```

--------------------------------

### Override Preset Properties

Source: https://formly.dev/docs/guide/formly-field-presets

Reuse fields from a preset while overriding specific properties by defining them directly in the field configuration. This example overrides the label for the 'firstName' preset.

```typescript
fieldConfig = [
  ...
  {
    type: '#firstName'
    props: {
      label: 'alternative label'
    }
  }
]

```

--------------------------------

### Input with Template Hints

Source: https://formly.dev/docs/examples/other/material-formfield-hint-align

Use hintStart and hintEnd properties with TemplateRefs for alignment. This allows for more complex hint content.

```typescript
hintStart: templateRefStart,
hintEnd: templateRefEnd
```

--------------------------------

### build

Source: https://formly.dev/docs/api/core

Builds a formly field configuration.

```APIDOC
## build

### Description
Builds a formly field configuration.

### Method
build

### Parameters
#### Path Parameters
- **field** (FormlyFieldConfig) - Required - The field configuration to build.

### Return Value
`void`
```

--------------------------------

### FormlyModule Methods

Source: https://formly.dev/docs/api/core

Methods for configuring the FormlyModule, including forChild and forRoot.

```APIDOC
## FormlyModule Methods

### `forChild(config: ConfigOption)`

Configures the FormlyModule for child routes.

### `forRoot(config: ConfigOption)`

Configures the FormlyModule for the root application.
```

--------------------------------

### Import FormlyFormBuilder

Source: https://formly.dev/docs/api/core

Import FormlyFormBuilder for building and managing form structures.

```typescript
import {FormlyFormBuilder} from '@ngx-formly/core';  
```

--------------------------------

### Import FormlyBootstrapAddonsModule

Source: https://formly.dev/docs/api/ui/bootstrap/addons

Import the FormlyBootstrapAddonsModule to enable Bootstrap addons in your Formly forms.

```typescript
import {FormlyBootstrapAddonsModule} from '@ngx-formly/bootstrap/addons';
```

--------------------------------

### React to Expression Changes with RxJS

Source: https://formly.dev/docs/guide/expression-properties

Subscribe to `options.fieldChanges` to get notified when expressions are evaluated. Filter the observable stream to react to specific expression changes, such as a field becoming visible.

```typescript
{
  key: 'city',
  type: 'input',
  expressions: {
    hide: (field: FormlyFieldConfig) => {
      // city field is rendered only when `country` is set
      return !(field.model?.country);
    },
  },
  hooks: {
    onInit: (field) => {
      return field.options.fieldChanges.pipe(
        filter(e => {
          return e.type === 'expressionChanges'
            && e.field === field
            && e.property === 'hide'
            && e.value === false
        }),
        tap(e => console.warn('City field is shown', e)),
      )
    }
  }
},

```

--------------------------------

### Disable Submit Button on Invalid Form

Source: https://formly.dev/docs/examples/validation/disable-submit-button

This example shows how to disable the submit button when the form is invalid. It's a common pattern to prevent users from submitting incomplete or incorrect data.

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

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form = new FormGroup({});
  model = {
    text: '',
  };
  options: FormlyFormOptions = {
    formState: {
      disabled: true,
    },
  };
  fields: FormlyFieldConfig[] = [
    {
      key: 'text',
      type: 'input',
      templateOptions: {
        label: 'Text',
        placeholder: 'Enter text',
        required: true,
      },
    },
    {
      key: 'submit',
      type: 'button',
      templateOptions: {
        text: 'Submit',
        btnType: 'primary',
        disabled: '!form.valid',
      },
    },
  ];
}
```

--------------------------------

### Import FormlyPrimeNGModule

Source: https://formly.dev/docs/api/ui/primeng

Import the FormlyPrimeNGModule to enable PrimeNG component integration. This is typically done in your application's main module.

```typescript
import {FormlyPrimeNGModule} from '@ngx-formly/primeng';
```

--------------------------------

### Import FormlyFieldTemplates

Source: https://formly.dev/docs/api/core

Import FormlyFieldTemplates for managing custom field templates.

```typescript
import {FormlyFieldTemplates} from '@ngx-formly/core';  
```

--------------------------------

### Toggle Field Required Status

Source: https://formly.dev/docs/examples/validation/toggle-required

Use `expressions` to dynamically set the `required` property of a field. This example also configures `validation.show` to display errors immediately and `validationMessages` for custom error messages.

```typescript
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FieldWrapper, FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form = new FormGroup({});
  model = {
    name: 'Moehahah',
  };
  options: FormlyFormOptions = {
    formState: {
      disabled: false,
    },
  };
  fields: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Name',
        placeholder: 'Enter name',
      },
      expressionProperties: {
        'templateOptions.required': 'formState.disabled ? false : true',
      },
      validation: {
        show: true,
      },
      validationMessages: {
        required: 'This field is required',
      },
    },
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        label: 'Email',
        placeholder: 'Enter email',
      },
      hideExpression: 'model.name',
    },
  ];
}
```

--------------------------------

### Using formState.disabled in Formly Fields

Source: https://formly.dev/docs/examples/form-options/form-state

This example shows how to leverage `formState.disabled` within your Formly field configurations to conditionally disable fields. It's useful for controlling user input based on application state.

```typescript
{
  key: 'firstName',
  type: 'input',
  templateOptions: {
    label: 'First Name',
  },
  expressionProperties: {
    'templateOptions.disabled': 'formState.disabled',
  },
}
```

--------------------------------

### Form Data Output

Source: https://formly.dev/docs/examples/field-options/default-value

Displays the resulting form data object after initialization.

```json
[object Object]
```

```javascript
Object{lastName:"Smith", firstName:"This is a default value", candy:"milky_way"}
lastName:"Smith"
firstName:"This is a default value"
candy:"milky_way"
```

--------------------------------

### Import FormlyBootstrapTextAreaModule

Source: https://formly.dev/docs/api/ui/bootstrap/textarea

Import the FormlyBootstrapTextAreaModule to use textarea fields in your Formly forms with Bootstrap.

```typescript
import {FormlyBootstrapTextAreaModule} from '@ngx-formly/bootstrap/textarea';  
```

--------------------------------

### Import FormlyMaterialModule

Source: https://formly.dev/docs/api/ui/material

Import the FormlyMaterialModule to enable Material Design integration with Formly.

```typescript
import {FormlyMaterialModule} from '@ngx-formly/material';
```

--------------------------------

### Import FormlyPresetModule

Source: https://formly.dev/docs/api/core/preset

Import the FormlyPresetModule from the @ngx-formly/core/preset package. This is typically done in your application's root module or a feature module.

```typescript
import {FormlyPresetModule} from '@ngx-formly/core/preset';
```

--------------------------------

### Multi-Step Form with Material Stepper

Source: https://formly.dev/docs/examples/advanced/multi-step-form

This snippet illustrates the structure of a multi-step form using Material Stepper. It outlines the different steps and input fields required for each stage of the form.

```typescript
import { Component } from "@angular/core";
import {
  FormlyFormOptions,
  FormlyFieldConfig
} from "@ngx-formly/core";

@Component({
  selector: "formly-app-multi-step-form",
  templateUrl: "./multi-step-form.component.html"
})
export class MultiStepFormComponent {
  fields: FormlyFieldConfig[] = [
    {
      key: "step1",
      templateOptions: { label: "Personal data" },
      fieldGroup: [
        {
          key: "firstName",
          type: "input",
          templateOptions: {
            label: "First name",
            required: true
          },
          validation: {
            messages: {
              required: "This is required"
            }
          }
        },
        {
          key: "age",
          type: "input",
          templateOptions: {
            label: "Age",
            type: "number",
            required: true
          },
          validation: {
            messages: {
              required: "This is required"
            }
          }
        }
      ]
    },
    {
      key: "step2",
      templateOptions: { label: "Destination" },
      fieldGroup: [
        {
          key: "country",
          type: "input",
          templateOptions: {
            label: "Country",
            required: true
          },
          validation: {
            messages: {
              required: "This is required"
            }
          }
        }
      ]
    },
    {
      key: "step3",
      templateOptions: { label: "Day of the trip" },
      fieldGroup: [
        {
          key: "day",
          type: "input",
          templateOptions: {
            label: "Day of the trip",
            required: true
          },
          validation: {
            messages: {
              required: "This is required"
            }
          }
        }
      ]
    }
  ];
  options: FormlyFormOptions = {
    formState: {
      disabled: true,
      stepIndex: 0
    }
  };
  model = {
    step1: {
      firstName: "",
      age: null
    },
    step2: {
      country: ""
    },
    step3: {
      day: ""
    }
  };
}
```

--------------------------------

### Import FormlyBootstrapFormFieldModule

Source: https://formly.dev/docs/api/ui/bootstrap/form-field

Import the FormlyBootstrapFormFieldModule to enable Bootstrap form field integration.

```typescript
import {FormlyBootstrapFormFieldModule} from '@ngx-formly/bootstrap/form-field';
```

--------------------------------

### Power Form with JSON Configuration

Source: https://formly.dev/docs/examples/other/json-powered

Use this to persist form configurations in a database and load them dynamically. Supports expressions and validators directly within the JSON string.

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

@Component({
  selector: 'formly-app-json-powered',
  templateUrl: './formly-app-json-powered.component.html',
})
export class FormlyAppJsonPoweredComponent {
  fields: FormlyFieldConfig[] = [
    {
      key: 'name',
      type: 'input',
      templateOptions: {
        label: 'Name',
        placeholder: 'Enter name',
        required: true,
      },
    },
    {
      key: 'age',
      type: 'input',
      templateOptions: {
        label: 'Age',
        type: 'number',
        placeholder: 'Enter age',
        required: true,
      },
      expressionProperties: {
        'templateOptions.disabled': 'model.age > 18',
      },
    },
  ];
  model = {};
  options: FormlyFormOptions = {};
}
```

--------------------------------

### Formly field hooks usage

Source: https://formly.dev/docs/guide/faq

Utilize Formly's lifecycle hooks like 'onInit' to interact with field instances during their initialization.

```typescript
fields: FormlyFieldConfig[] = [
  {
    type: 'input',
    hooks: {
      onInit: (field) => {
        const { form, model, options } = field;
        ...
      },
    },
  }
];
```

--------------------------------

### Import FormlyMatInputModule

Source: https://formly.dev/docs/api/ui/material/input

Import the FormlyMatInputModule to use Material Design input fields in Formly.

```typescript
import {FormlyMatInputModule} from '@ngx-formly/material/input';
```

--------------------------------

### Import FormlyJsonschema

Source: https://formly.dev/docs/api/core/json-schema

Import the FormlyJsonschema service from the @ngx-formly/core/json-schema package.

```typescript
import {FormlyJsonschema} from '@ngx-formly/core/json-schema';
```

--------------------------------

### WrapperOption

Source: https://formly.dev/docs/api/core

Configuration options for defining custom wrappers in Formly.

```APIDOC
## WrapperOption

### Description
Configuration options for defining custom wrappers in Formly.

### Parameters
#### Request Body
- **component** (Type<FieldWrapper>) - Required - The component to use for the wrapper.
- **name** (string) - Required - The unique name of the wrapper.
- **types** (string[]) - Optional - An array of type names this wrapper applies to.
```

--------------------------------

### Import FormlyNzRadioModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/radio

Import the module to enable radio field support in your Formly configuration.

```typescript
import {FormlyNzRadioModule} from '@ngx-formly/ng-zorro-antd/radio';
```

--------------------------------

### Import FormlyBootstrapModule

Source: https://formly.dev/docs/api/ui/bootstrap

Import the FormlyBootstrapModule from the @ngx-formly/bootstrap package to enable Bootstrap-specific formly features.

```typescript
import {FormlyBootstrapModule} from '@ngx-formly/bootstrap';
```

--------------------------------

### Import FormlyNzSelectModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/select

Import the module to enable select field support in your Formly configuration.

```typescript
import {FormlyNzSelectModule} from '@ngx-formly/ng-zorro-antd/select';
```

--------------------------------

### Import FormlyConfig

Source: https://formly.dev/docs/api/core

Import FormlyConfig to manage and register custom field types, validators, and wrappers.

```typescript
import {FormlyConfig} from '@ngx-formly/core';  
```

--------------------------------

### Import FormlyBootstrapInputModule

Source: https://formly.dev/docs/api/ui/bootstrap/input

Required module import for using Bootstrap input fields in Formly.

```typescript
import {FormlyBootstrapInputModule} from '@ngx-formly/bootstrap/input';  
```

--------------------------------

### Import FormlyNzCheckboxModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/checkbox

Import the module to enable checkbox field support in your application.

```typescript
import {FormlyNzCheckboxModule} from '@ngx-formly/ng-zorro-antd/checkbox';
```

--------------------------------

### Import FormlyBootstrapRadioModule

Source: https://formly.dev/docs/api/ui/bootstrap/radio

Import the module to enable radio field functionality in your Angular application.

```typescript
import {FormlyBootstrapRadioModule} from '@ngx-formly/bootstrap/radio';
```

--------------------------------

### Register Extension with Priority

Source: https://formly.dev/docs/guide/custom-formly-extension

Assign a `priority` number when registering an extension to control its execution order relative to other extensions. Higher numbers execute later.

```typescript
provideFormlyCore({
  extensions: [
    {
      name: 'default-label',
      extension: defaultLabelExtension,
      priority: 3
    }
  ]
})

```

--------------------------------

### Import FormlyNzTextAreaModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/textarea

Import the module to enable textarea field support in your Formly configuration.

```typescript
import {FormlyNzTextAreaModule} from '@ngx-formly/ng-zorro-antd/textarea';  
```

--------------------------------

### Configure Formly Core in app.config.ts

Source: https://formly.dev/docs/guide/getting-started

Import and provide Formly Core with your chosen UI theme configuration in the application's configuration file.

```typescript
import { ApplicationConfig } from '@angular/core';
import { provideFormlyCore } from '@ngx-formly/core'
import { withFormlyBootstrap } from '@ngx-formly/bootstrap';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFormlyCore(withFormlyBootstrap()),
  ],
};

```

--------------------------------

### Register Custom Extension in App Config

Source: https://formly.dev/docs/guide/custom-formly-extension

Register your custom extension within the `provideFormlyCore` configuration. Assign a unique name and provide the extension instance.

```typescript
import { provideFormlyCore } from '@ngx-formly/core';
import { defaultLabelExtension } from './default-label-extension';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFormlyCore({
      extensions: [
        {
          name: 'default-label',
          extension: defaultLabelExtension
        }
      ]
    }),
  ],
};

```

--------------------------------

### FormlyInputFieldConfig Interface

Source: https://formly.dev/docs/api/ui/ionic/input

Defines the configuration options for a Formly input field.

```APIDOC
## FormlyInputFieldConfig Interface

### Description

Represents the configuration object for an input field within Formly.

### Parameters

| Name | Type |
|---|---|
| `type` | `"input"` | `Type<FormlyFieldInput>` |
```

--------------------------------

### Import FormlyInputModule

Source: https://formly.dev/docs/api/ui/primeng/input

Import the module to enable PrimeNG input field support in Formly.

```typescript
import {FormlyInputModule} from '@ngx-formly/primeng/input';  
```

--------------------------------

### Import Formly Ionic Module

Source: https://formly.dev/docs/api/ui/ionic

Import the FormlyIonicModule to enable Formly integration with Ionic components.

```typescript
import {FormlyIonicModule} from '@ngx-formly/ionic';
```

--------------------------------

### FormlyInputFieldConfig

Source: https://formly.dev/docs/api/ui/material/input

Interface for configuring Formly input fields.

```APIDOC
## Interfaces
### FormlyInputFieldConfig
#### Parameters
Name| Type  
---|---
`type`| `"input"`|Type<FormlyFieldInput>
```

--------------------------------

### Import FormlyRadioModule

Source: https://formly.dev/docs/api/ui/primeng/radio

Import the module to enable radio field support in your application.

```typescript
import {FormlyRadioModule} from '@ngx-formly/primeng/radio';  
```

--------------------------------

### Import FormlySelectModule

Source: https://formly.dev/docs/api/core/select

Import the FormlySelectModule to use its features, particularly for select fields.

```typescript
import {FormlySelectModule} from '@ngx-formly/core/select';
```

--------------------------------

### Import FormlyBootstrapSelectModule

Source: https://formly.dev/docs/api/ui/bootstrap/select

Import the module to enable select field functionality in your Bootstrap Formly implementation.

```typescript
import {FormlyBootstrapSelectModule} from '@ngx-formly/bootstrap/select';
```

--------------------------------

### Import FormlyModule

Source: https://formly.dev/docs/api/core

Import the FormlyModule to use its features in your application.

```typescript
import {FormlyModule} from '@ngx-formly/core';  
```

--------------------------------

### Import FormlyNsTextAreaFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/textarea

Import the module to enable textarea field support in your NativeScript application.

```typescript
import {FormlyNsTextAreaFieldModule} from '@ngx-formly/nativescript/textarea';
```

--------------------------------

### FormlyInputFieldConfig Interface

Source: https://formly.dev/docs/api/ui/nativescript/text-field

Defines the configuration for a Formly text input field.

```APIDOC
## Interfaces

### FormlyInputFieldConfig

#### Parameters

Name| Type  
---|---
`type`| `"input"` | `Type<FormlyFieldInput>`
```

--------------------------------

### MatFormlyFieldConfig Interface

Source: https://formly.dev/docs/api/ui/material/form-field

Extends FormlyFieldConfig to include Material-specific configurations.

```APIDOC
## Interface: MatFormlyFieldConfig

### Description
Extends FormlyFieldConfig to incorporate Material Design specific properties.

### Parameters
#### Properties
- **_formField** (FormlyWrapperFormField) - Internal reference to the Material form field wrapper component.
```

--------------------------------

### Display Form Data Output

Source: https://formly.dev/docs/examples/other/cascaded-select

Displays the current state of the form object, showing the selected sport and player values.

```json
[object Object]
```

```javascript
Object{sport:"1", player:null}
sport:"1"
player:null
```

--------------------------------

### Basic Formly Form Structure

Source: https://formly.dev/docs/guide/properties-options

General usage of the `formly-form` component to render a form. It requires `form`, `fields`, and `model` inputs.

```html
<formly-form  
  [form]="form"  
  [fields]="fields"  
  [model]="model">
</formly-form>  

```

--------------------------------

### Import FormlyBootstrapMultiCheckboxModule

Source: https://formly.dev/docs/api/ui/bootstrap/multicheckbox

Import the necessary module to use the multi-checkbox field type in your Formly forms.

```typescript
import {FormlyBootstrapMultiCheckboxModule} from '@ngx-formly/bootstrap/multicheckbox';
```

--------------------------------

### Import FormlyFormFieldModule

Source: https://formly.dev/docs/api/ui/primeng/form-field

Import the module to enable PrimeNG form field wrappers in your application.

```typescript
import {FormlyFormFieldModule} from '@ngx-formly/primeng/form-field';  
```

--------------------------------

### Import FormlyNzInputModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/input

Import the module to enable ng-zorro-antd input fields in your Formly forms.

```typescript
import {FormlyNzInputModule} from '@ngx-formly/ng-zorro-antd/input';  
```

--------------------------------

### Import FormlyInputModule

Source: https://formly.dev/docs/api/ui/ionic/input

Import the FormlyInputModule to use Ionic input fields with Formly.

```typescript
import {FormlyInputModule} from '@ngx-formly/ionic/input';  
```

--------------------------------

### FormlyInputFieldConfig Interface

Source: https://formly.dev/docs/api/ui/kendo/input

Defines the configuration for a Formly input field, specifying the type and associated component.

```APIDOC
## Interfaces

### FormlyInputFieldConfig

#### Parameters

Name| Type  
---|---
`type`| `"input"`|Type<FormlyFieldInput>
```

--------------------------------

### Import FormlyKendoModule

Source: https://formly.dev/docs/api/ui/kendo

Import the FormlyKendoModule to enable Kendo UI field types in Formly.

```typescript
import {FormlyKendoModule} from '@ngx-formly/kendo';  
```

--------------------------------

### FormlyInputModule

Source: https://formly.dev/docs/api/ui/kendo/input

Import the FormlyInputModule to use Kendo UI input fields with Formly.

```APIDOC
import {FormlyInputModule} from '@ngx-formly/kendo/input';
```

--------------------------------

### SliderProps

Source: https://formly.dev/docs/api/ui/ionic/slider

Interface for slider properties.

```APIDOC
## SliderProps

### Description

Interface defining the properties specific to Ionic slider components when used with Formly.
```

--------------------------------

### Import FormlySelectModule

Source: https://formly.dev/docs/api/ui/ionic/select

Import the FormlySelectModule to enable the Ionic select field type in your application.

```typescript
import {FormlySelectModule} from '@ngx-formly/ionic/select';  
```

--------------------------------

### Import FormlyFormFieldModule

Source: https://formly.dev/docs/api/ui/kendo/form-field

Import the FormlyFormFieldModule to enable Kendo UI form field integration.

```typescript
import {FormlyFormFieldModule} from '@ngx-formly/kendo/form-field';
```

--------------------------------

### FormlyWrapperFormField Component

Source: https://formly.dev/docs/api/ui/bootstrap/form-field

Information about the FormlyWrapperFormField component, including its selector.

```APIDOC
## Components
### FormlyWrapperFormField
#### Selector
`formly-wrapper-form-field`
```

--------------------------------

### FormlyDatepickerFieldConfig Interface

Source: https://formly.dev/docs/api/ui/material/datepicker

Extends FormlyFieldConfig to specify the type as 'datepicker' and associate it with FormlyFieldDatepicker.

```APIDOC
### FormlyDatepickerFieldConfig
#### Parameters
Name| Type  
---|---  
`type`| `"datepicker"`|`Type`<FormlyFieldDatepicker>
```

--------------------------------

### FormlyTemplate Directive

Source: https://formly.dev/docs/api/core

Provides a way to specify custom templates for form elements.

```APIDOC
## FormlyTemplate Directive

### Selector
`[formlyTemplate]`

### Inputs
- **`formlyTemplate`** (string) - The template identifier.
```

--------------------------------

### Import FormlyCheckboxModule

Source: https://formly.dev/docs/api/ui/primeng/checkbox

Import the module to enable checkbox field support in your application.

```typescript
import {FormlyCheckboxModule} from '@ngx-formly/primeng/checkbox';  
```

--------------------------------

### buildForm

Source: https://formly.dev/docs/api/core

Builds a formly form from a given form group, field configuration, model, and options.

```APIDOC
## buildForm

### Description
Builds a formly form from a given form group, field configuration, model, and options.

### Method
buildForm

### Parameters
#### Path Parameters
- **form** (UntypedFormGroup | UntypedFormArray) - Required - The form group or array to build the form from.
- **fieldGroup** (FormlyFieldConfig[]) - Required - An array of FormlyFieldConfig objects defining the form structure.
- **model** (any) - Required - The data model for the form.
- **options** (FormlyFormOptions) - Required - Options for the formly form.

### Return Value
`void`
```

--------------------------------

### Configure Custom Wrapper Alias in App Config

Source: https://formly.dev/docs/guide/custom-formly-wrapper

Register your custom wrapper component with an alias in the `provideFormlyCore` configuration. This step is necessary for using the wrapper with JSON-powered forms.

```typescript
import { PanelFieldWrapper } from './panel-wrapper.component';
...
export const appConfig: ApplicationConfig = {
  providers: [
    provideFormlyCore({
      wrappers: [
        { name: 'panel', component: PanelFieldWrapper },
      ],
    }),
  ],
};

```

--------------------------------

### FormlyNsRadioFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/radio

Import statement for the Formly NativeScript Radio Field module.

```APIDOC
## Import
```typescript
import {FormlyNsRadioFieldModule} from '@ngx-formly/nativescript/radio';
```
```

--------------------------------

### Import FormlyInputModule

Source: https://formly.dev/docs/api/ui/kendo/input

Import the FormlyInputModule to use Kendo UI input fields within Formly.

```typescript
import {FormlyInputModule} from '@ngx-formly/kendo/input';  
```

--------------------------------

### Import FormlyFormFieldModule

Source: https://formly.dev/docs/api/ui/ionic/form-field

Import the FormlyFormFieldModule to enable Ionic form field integration with Formly.

```typescript
import {FormlyFormFieldModule} from '@ngx-formly/ionic/form-field';
```

--------------------------------

### LegacyFormlySelectOptionsPipe

Source: https://formly.dev/docs/api/core/select

A legacy pipe for transforming select field options. It shares the same selector as the current FormlySelectOptionsPipe.

```APIDOC
## LegacyFormlySelectOptionsPipe

### Description
A legacy pipe for transforming select field options.

### Selector
`formlySelectOptions`
```

--------------------------------

### Import FormlyNsFormFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/form-field

Import the module to enable NativeScript form field functionality in your application.

```typescript
import {FormlyNsFormFieldModule} from '@ngx-formly/nativescript/form-field';
```

--------------------------------

### Import FormlyNsSelectFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/select

Import the FormlyNsSelectFieldModule to use select field functionality in your NativeScript application.

```typescript
import {FormlyNsSelectFieldModule} from '@ngx-formly/nativescript/select';  
```

--------------------------------

### Import FormlyDatepickerModule

Source: https://formly.dev/docs/api/ui/primeng/datepicker

Import the module to enable datepicker functionality in your Formly application.

```typescript
import {FormlyDatepickerModule} from '@ngx-formly/primeng/datepicker';
```

--------------------------------

### InputProps

Source: https://formly.dev/docs/api/ui/material/input

Interface for input field properties.

```APIDOC
### InputProps

```

--------------------------------

### Import FormlyInputModule

Source: https://formly.dev/docs/api/core/testing

Import the FormlyInputModule for use in testing Formly components. This module is part of the core testing utilities.

```typescript
import {FormlyInputModule} from '@ngx-formly/core/testing';
```

--------------------------------

### FormlyFieldRadio Component

Source: https://formly.dev/docs/api/ui/nativescript/radio

Information about the FormlyFieldRadio component, including its selector.

```APIDOC
## Components
### FormlyFieldRadio
#### Selector
`formly-field-ns-radio`
```

--------------------------------

### TextAreaProps

Source: https://formly.dev/docs/api/ui/primeng/textarea

Props available for the PrimeNG textarea field.

```APIDOC
### TextAreaProps
```

--------------------------------

### Import FormlyNativescriptModule

Source: https://formly.dev/docs/api/ui/nativescript

Import the FormlyNativescriptModule for use in your Nativescript application.

```typescript
import {FormlyNativescriptModule} from '@ngx-formly/nativescript';  
```

--------------------------------

### Import FormlyNgZorroAntdModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd

Import the FormlyNgZorroAntdModule to enable Formly's integration with NgZorro Antd components. This is typically done in your application's main module.

```typescript
import {FormlyNgZorroAntdModule} from '@ngx-formly/ng-zorro-antd';
```

--------------------------------

### FormlyConfig Service

Source: https://formly.dev/docs/api/core

Manages the registration and retrieval of Formly configurations, including field types, validators, and wrappers.

```APIDOC
## FormlyConfig Service

### Methods
- **`addConfig(config: ConfigOption | ConfigOption[])`**: Adds Formly configuration options.
- **`addValidatorMessage(name: string, message: ValidationMessageOption)`**: Adds a custom validator message.
- **`getType(name: FormlyFieldConfig, throwIfNotFound: boolean)`**: Retrieves a field type configuration.
- **`getValidator(name: string)`**: Retrieves a validator configuration.
- **`getValidatorMessage(name: string)`**: Retrieves a validator message configuration.
- **`getWrapper(name: string | Type<FieldWrapper>)`**: Retrieves a wrapper configuration.
- **`setType(options: TypeOption | TypeOption[])`**: Registers custom field types.
- **`setValidator(options: ValidatorOption)`**: Registers custom validators.
- **`setWrapper(options: WrapperOption)`**: Registers custom wrappers.
```

--------------------------------

### Import FormlyMatToggleModule

Source: https://formly.dev/docs/api/ui/material/toggle

Import the module to enable toggle field support in your Angular application.

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

--------------------------------

### Import FormlyMatSelectModule

Source: https://formly.dev/docs/api/ui/material/select

Import the module to enable the select field component in your Angular application.

```typescript
import {FormlyMatSelectModule} from '@ngx-formly/material/select';  
```

--------------------------------

### Display Form Data

Source: https://formly.dev/docs/examples/bootstrap-specific/input-add-ons

Displays the current form data object.

```json
[object Object]
```

```json
Object{}
```

--------------------------------

### FormlySelectFieldConfig Interface

Source: https://formly.dev/docs/api/ui/nativescript/select

Defines the configuration for a select field in Formly, specifying its type and associated component.

```APIDOC
## Interface
### FormlySelectFieldConfig
#### Parameters
Name| Type  
---|---
`type`| `"select"`|`Type`<FormlyFieldSelect>
```

--------------------------------

### TypeOption

Source: https://formly.dev/docs/api/core

Configuration options for defining a custom field type in Formly.

```APIDOC
## TypeOption

### Description
Configuration options for defining a custom field type in Formly.

### Parameters
#### Request Body
- **component** (Type<FieldType>) - Required - The component to use for this field type.
- **defaultOptions** (FormlyFieldConfig) - Optional - Default configuration options for fields of this type.
- **extends** (string) - Optional - The name of another type to extend.
- **name** (string) - Required - The unique name of the type.
- **wrappers** (string[]) - Optional - An array of wrapper names to apply to fields of this type.
```

--------------------------------

### Import FormlySelectModule

Source: https://formly.dev/docs/api/ui/kendo/select

Import the FormlySelectModule to enable Kendo Select integration in your Formly application. This is typically done in your AppModule.

```typescript
import {FormlySelectModule} from '@ngx-formly/kendo/select';  
```

--------------------------------

### FormlyNsTextFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/text-field

Import the FormlyNsTextFieldModule to use text field components in your NativeScript application.

```APIDOC
## FormlyNsTextFieldModule

```typescript
import {FormlyNsTextFieldModule} from '@ngx-formly/nativescript/text-field';
```
```

--------------------------------

### FormlyNsSelectFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/select

Import the FormlyNsSelectFieldModule to use the select field component in your NativeScript application.

```APIDOC
## Import
```typescript
import {FormlyNsSelectFieldModule} from '@ngx-formly/nativescript/select';
```
```

--------------------------------

### FormlySelectFieldConfig Interface

Source: https://formly.dev/docs/api/ui/kendo/select

Defines the configuration for a select field within Formly, specifying its type and associated component.

```APIDOC
## Interfaces

### FormlySelectFieldConfig

#### Parameters

Name| Type  
---|---
`type`| `"select"`|`Type<FormlyFieldSelect>`
```

--------------------------------

### Import FormlyNzFormFieldModule

Source: https://formly.dev/docs/api/ui/ng-zorro-antd/form-field

Import the module to enable NG-ZORRO-ANTD form field wrappers in your Formly configuration.

```typescript
import {FormlyNzFormFieldModule} from '@ngx-formly/ng-zorro-antd/form-field';  
```

--------------------------------

### DatepickerProps Interface

Source: https://formly.dev/docs/api/ui/material/datepicker

Defines the properties available for configuring the material datepicker.

```APIDOC
## Interfaces
### DatepickerProps
#### Parameters
Name| Type  
---|---  
`datepickerOptions`| `Partial`<`literal type`>
```

--------------------------------

### Import FormlyMatFormFieldModule

Source: https://formly.dev/docs/api/ui/material/form-field

Import the FormlyMatFormFieldModule to enable Material Design form field integration with Formly. This is typically done in your application's main module.

```typescript
import {FormlyMatFormFieldModule} from '@ngx-formly/material/form-field';
```

--------------------------------

### Import FormlyDatetimeModule

Source: https://formly.dev/docs/api/ui/ionic/datetime

Import the module to enable datetime field support in your Ionic application.

```typescript
import {FormlyDatetimeModule} from '@ngx-formly/ionic/datetime';
```

--------------------------------

### IP Address Validation (Global)

Source: https://formly.dev/docs/examples/validation/custom-validation

Demonstrates how to implement IP address validation globally using a custom validator declared in your NgModule. This approach makes the validator available for use in any field configuration.

```typescript
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';

// Custom validator function
export function ipValidator(control: any) {
  const ip = control.value;
  const ipPattern = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
  if (!ipPattern.test(ip)) {
    return { 'ip': true };
  }
  const parts = ip.split('.');
  for (let i = 0; i < parts.length; i++) {
    if (parseInt(parts[i], 10) > 255) {
      return { 'ip': true };
    }
  }
  return null;
}

// In your NgModule:
@NgModule({
  imports: [
    // ... other imports
    FormlyModule.forRoot({
      validators: [
        { name: 'ip', validation: ipValidator },
      ],
    }),
  ],
  // ...
})
export class AppModule { }
```

--------------------------------

### FormlyFieldProps Interface

Source: https://formly.dev/docs/api/ui/bootstrap/form-field

Details of the FormlyFieldProps interface, including its parameters.

```APIDOC
## Interfaces
### FormlyFieldProps
#### Parameters
Name| Type  
---|---
`hideLabel`| `boolean`  
`hideRequiredMarker`| `boolean`  
`labelPosition`|
```

--------------------------------

### Import FormlySliderModule

Source: https://formly.dev/docs/api/ui/ionic/slider

Import the FormlySliderModule to use Ionic slider components within Formly.

```typescript
import {FormlySliderModule} from '@ngx-formly/ionic/slider';  
```

--------------------------------

### Import FormlyMatDatepickerModule

Source: https://formly.dev/docs/api/ui/material/datepicker

Import the FormlyMatDatepickerModule to enable the datepicker field in your Formly forms.

```typescript
import {FormlyMatDatepickerModule} from '@ngx-formly/material/datepicker';
```

--------------------------------

### Import FormlyNsTextFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/text-field

Import the FormlyNsTextFieldModule to use Formly's text field components in your NativeScript application.

```typescript
import {FormlyNsTextFieldModule} from '@ngx-formly/nativescript/text-field';
```

--------------------------------

### FormlyRadioModule

Source: https://formly.dev/docs/api/ui/primeng/radio

The module provides the necessary components for rendering radio buttons in a Formly form using PrimeNG.

```APIDOC
## FormlyRadioModule

### Import
`import {FormlyRadioModule} from '@ngx-formly/primeng/radio';`

### Components
#### FormlyFieldRadio
- **Selector**: `formly-field-primeng-radio`

### Interfaces
#### FormlyRadioFieldConfig
- **type**: `"radio"` (Type: `FormlyFieldRadio`)
```

--------------------------------

### FormlyRadioFieldConfig Interface

Source: https://formly.dev/docs/api/ui/nativescript/radio

Details of the FormlyRadioFieldConfig interface, used for configuring radio fields.

```APIDOC
## Interfaces
### FormlyRadioFieldConfig
#### Parameters
Name| Type  
---|---
`type`|`"radio"`|Type<FormlyFieldRadio>
```

--------------------------------

### Import FormlyMatCheckboxModule

Source: https://formly.dev/docs/api/ui/material/checkbox

Import the FormlyMatCheckboxModule to enable Material Design checkboxes in your Formly forms. This is typically done in your application's main module.

```typescript
import {FormlyMatCheckboxModule} from '@ngx-formly/material/checkbox';  
```

--------------------------------

### FormlyToggleFieldConfig Interface

Source: https://formly.dev/docs/api/ui/ionic/toggle

The FormlyToggleFieldConfig interface defines the configuration for a toggle field, specifying its type and associated component.

```APIDOC
## Interfaces

### FormlyToggleFieldConfig

#### Parameters

Name| Type  
---|---
`type`| `"toggle"`|Type<FormlyFieldToggle>
```

--------------------------------

### Import FormlyTextAreaModule

Source: https://formly.dev/docs/api/ui/kendo/textarea

Import the FormlyTextAreaModule to use the Kendo TextArea field type in your Formly forms.

```typescript
import {FormlyTextAreaModule} from '@ngx-formly/kendo/textarea';  
```

--------------------------------

### FormlyMatDatepickerModule

Source: https://formly.dev/docs/api/ui/material/datepicker

Import the FormlyMatDatepickerModule to use the material datepicker field in your forms.

```APIDOC
## Import
```typescript
import {FormlyMatDatepickerModule} from '@ngx-formly/material/datepicker';
```
```

--------------------------------

### FormlyMultiCheckboxFieldConfig Interface

Source: https://formly.dev/docs/api/ui/material/multicheckbox

Defines the configuration interface for a multi-checkbox field in Formly.

```APIDOC
## FormlyMultiCheckboxFieldConfig

### Description
Interface for configuring a multi-checkbox field type within Formly.

### Parameters

| Name | Type |
|---|---|
| `type` | `"multicheckbox"` | `Type<FormlyFieldMultiCheckbox>` |
```

--------------------------------

### Import FormlyNsRadioFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/radio

Import the FormlyNsRadioFieldModule to enable radio button field types in your NativeScript Formly forms.

```typescript
import {FormlyNsRadioFieldModule} from '@ngx-formly/nativescript/radio';
```

--------------------------------

### ToggleProps

Source: https://formly.dev/docs/api/ui/material/toggle

Properties for configuring the toggle field appearance.

```APIDOC
## Interface: ToggleProps

### Parameters
- **labelPosition** (string) - Optional - Defines the position of the label relative to the toggle. Supported values: "before", "after".
```

--------------------------------

### InputProps Interface

Source: https://formly.dev/docs/api/ui/nativescript/text-field

Defines the properties available for NativeScript text input fields.

```APIDOC
### InputProps

#### Parameters

Name| Type  
---|---
`autocorrect`| `boolean`
`hint`| `string`
`keyboardType`| `any`
`secure`| `boolean`
```

--------------------------------

### Formly Field Configuration

Source: https://formly.dev/docs/guide/custom-formly-extension

Define Formly fields. Fields with a `label` prop will use it, while fields without will have the default label applied by the extension.

```typescript
fields: FormlyFieldConfig[] = [
  {
    key: 'input',
    type: 'input',
    props: {
      label: 'Basic Input'
    }
  },
  {
    key: 'input2',
    type: 'input'
  }
];

```

--------------------------------

### AddonsProps Interface

Source: https://formly.dev/docs/api/ui/bootstrap/addons

Defines the properties available for addons in Formly forms.

```APIDOC
## AddonsProps

### Parameters

Name| Type
---|---
`addonLeft`| `literal type`
`addonRight`| `literal type`
```

--------------------------------

### FormlyFieldToggle

Source: https://formly.dev/docs/api/ui/material/toggle

The component used to render a Material Design toggle field.

```APIDOC
## Component: FormlyFieldToggle

### Selector
`formly-field-mat-toggle`

### Usage
Import `FormlyMatToggleModule` from `@ngx-formly/material/toggle` to use this component in your Formly configuration.
```

--------------------------------

### Async Username Validation (Promise)

Source: https://formly.dev/docs/examples/validation/unique-value-async-validation

Use this for validating unique values asynchronously using Promises. A server request is simulated with a one-second timeout.

```typescript
this.formlyConfig.validators.push({
  name: 'unique username',
  validation: async (value: string) => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    return ['user1', 'user2', 'user3'].indexOf(value) === -1;
  },
});
```

--------------------------------

### InputProps Interface

Source: https://formly.dev/docs/api/ui/kendo/input

Represents the properties that can be configured for Kendo UI input fields within Formly.

```APIDOC
### InputProps
```

--------------------------------

### Customize JSON Schema Output with Widget Property

Source: https://formly.dev/docs/guide/json-schema

Adjust the generated Formly field configuration by passing extra Formly config through the `widget` property in the JSON Schema.

```json
{
  "type": "string",
  "format": "date-time",
+ "widget": {
+   "formlyConfig": {
+     "props": { "type": "datetime-local" }
+   }
+ }
}
```

--------------------------------

### Import FormlyRadioModule

Source: https://formly.dev/docs/api/ui/kendo/radio

Import the FormlyRadioModule to enable Kendo UI radio button field types in Formly.

```typescript
import {FormlyRadioModule} from '@ngx-formly/kendo/radio';  
```

--------------------------------

### FormlySelectFieldConfig Interface

Source: https://formly.dev/docs/api/ui/ionic/select

Defines the configuration options for a select field within Formly, specifically for Ionic.

```APIDOC
## Interfaces

### FormlySelectFieldConfig

#### Parameters

| Name | Type |
|---|---|
| `type` | `"select"` | `Type<FormlyFieldSelect>` |
```

--------------------------------

### Import FormlyTextAreaModule

Source: https://formly.dev/docs/api/ui/primeng/textarea

Import the FormlyTextAreaModule to use the textarea field type in your Formly forms.

```typescript
import {FormlyTextAreaModule} from '@ngx-formly/primeng/textarea';  
```

--------------------------------

### MultiCheckboxProps Interface

Source: https://formly.dev/docs/api/ui/material/multicheckbox

Defines the properties specific to the multi-checkbox field configuration.

```APIDOC
## MultiCheckboxProps

### Description
Interface defining the customizable properties for the multi-checkbox field.

### Parameters

| Name | Type |
|---|---|
| `labelPosition` | `"before"` | `"after"` |
```

--------------------------------

### Import FormlyNsCheckboxFieldModule

Source: https://formly.dev/docs/api/ui/nativescript/checkbox

Import the module to enable checkbox field functionality in your NativeScript application.

```typescript
import {FormlyNsCheckboxFieldModule} from '@ngx-formly/nativescript/checkbox';
```

--------------------------------

### Form Data Display

Source: https://formly.dev/docs/examples/advanced/multi-step-form

This snippet shows how the form data is represented as a JavaScript object. It's useful for debugging or understanding the structure of the submitted form data.

```javascript
[object Object]
```

```javascript
Object{}
```

--------------------------------

### Import FormlyToggleModule

Source: https://formly.dev/docs/api/ui/ionic/toggle

Import the FormlyToggleModule to use toggle fields in your Ionic forms.

```typescript
import {FormlyToggleModule} from '@ngx-formly/ionic/toggle';  
```

--------------------------------

### FormlyFieldInput Component

Source: https://formly.dev/docs/api/ui/ionic/input

The FormlyFieldInput component is the core UI component for rendering input fields.

```APIDOC
## FormlyFieldInput

### Selector

`formly-field-ion-input`

### Description

This component renders an Ionic input field based on the Formly field configuration.
```

--------------------------------

### FormlySelectModule

Source: https://formly.dev/docs/api/ui/kendo/select

Import the FormlySelectModule to use the Kendo UI select field in your forms.

```APIDOC
import {FormlySelectModule} from '@ngx-formly/kendo/select';
```
Tokens:
Raw