### 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
```
--------------------------------
### Form Data Example
Source: https://formly.dev/docs/examples/bootstrap-formly/table-rows
This snippet shows the structure of the form data object when using Formly.
```json
[
{
"key": "textarea",
"type": "textarea",
"templateOptions": {
"label": "Textarea",
"rows": 5,
"cols": 10
}
}
]
```
--------------------------------
### 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: `
Form Value
{{ form.value | json }}
`,
})
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)),
)
}
}
},
```
--------------------------------
### Normal Select Options
Source: https://formly.dev/docs/examples/bootstrap-formly/select
Configure a standard select input with a list of options. Each option should have a `label` and `value` property.
```typescript
formlyConfig.setType({
name: 'select',
extends: 'input',
defaultOptions: {
templateOptions: {
options: [
{ label: 'Iron Man', value: 1 },
{ label: 'Captain America', value: 2 },
{ label: 'Black Widow', value: 3 },
{ label: 'Hulk', value: 4 },
{ label: 'Captain Marvel', value: 5 },
],
},
},
});
```
--------------------------------
### 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';
```
--------------------------------
### 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',
},
];
}
```
--------------------------------
### Import FormlyFieldTemplates
Source: https://formly.dev/docs/api/core
Import FormlyFieldTemplates for managing custom field templates.
```typescript
import {FormlyFieldTemplates} from '@ngx-formly/core';
```
--------------------------------
### 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',
},
}
```
--------------------------------
### 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) - 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 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 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';
```
--------------------------------
### 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
}
]
})
```
--------------------------------
### 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` |
```
--------------------------------
### 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
```
--------------------------------
### 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 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';
```
--------------------------------
### 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.
```
--------------------------------
### 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
```
--------------------------------
### 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 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
```
--------------------------------
### 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 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`
```
--------------------------------
### 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.
```
--------------------------------
### 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 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 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';
```
--------------------------------
### InputProps
Source: https://formly.dev/docs/api/ui/material/input
Interface for input field properties.
```APIDOC
### InputProps
```
--------------------------------
### 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';
```
--------------------------------
### TextAreaProps
Source: https://formly.dev/docs/api/ui/primeng/textarea
Props available for the PrimeNG textarea field.
```APIDOC
### TextAreaProps
```
--------------------------------
### 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`
```
--------------------------------
### 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)`**: Retrieves a wrapper configuration.
- **`setType(options: TypeOption | TypeOption[])`**: Registers custom field types.
- **`setValidator(options: ValidatorOption)`**: Registers custom validators.
- **`setWrapper(options: WrapperOption)`**: Registers custom wrappers.
```
--------------------------------
### 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) - 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`
```
--------------------------------
### 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';
```
--------------------------------
### 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 { }
```
--------------------------------
### 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';
```
--------------------------------
### 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 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';
```
--------------------------------
### 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
```
--------------------------------
### 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';
```
```
--------------------------------
### 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';
```
--------------------------------
### Grouped Select Options
Source: https://formly.dev/docs/examples/bootstrap-formly/select
Organize select options into groups using the `group` property. This is useful for categorizing choices.
```typescript
formlyConfig.setType({
name: 'select',
extends: 'input',
defaultOptions: {
templateOptions: {
options: [
{ label: 'Iron Man', value: 1 },
{ label: 'Captain America', value: 2 },
{
label: 'Avengers',
options: [
{ label: 'Hulk', value: 4 },
{ label: 'Black Widow', value: 3 },
],
},
{ label: 'Captain Marvel', value: 5 },
],
},
},
});
```
--------------------------------
### 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`
```
--------------------------------
### 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`
```
--------------------------------
### 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'
}
];
```
--------------------------------
### 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
```
--------------------------------
### 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';
```
--------------------------------
### 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" }
+ }
+ }
}
```
--------------------------------
### 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` |
```
--------------------------------
### 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"` |
```
--------------------------------
### 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';
```
--------------------------------
### FormlyFieldInput
Source: https://formly.dev/docs/api/ui/material/input
The FormlyFieldInput component is used to render Material Design input fields.
```APIDOC
## Components
### FormlyFieldInput
#### Selector
`formly-field-mat-input`
```
--------------------------------
### Define Custom Panel Wrapper Component
Source: https://formly.dev/docs/guide/custom-formly-wrapper
Create a component that extends `FieldWrapper` to define the structure and template for your custom wrapper. The `fieldComponent` template variable is where the wrapped field will be rendered.
```typescript
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { FieldWrapper } from '@ngx-formly/core';
@Component({
selector: 'formly-wrapper-panel',
template: `