FormlyModule

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

Methods

Method
forChild(   config: ConfigOption ): ModuleWithProviders<FormlyModule>
forRoot(   config: ConfigOption ): ModuleWithProviders<FormlyModule>

Components

FormlyField

The <formly-field> component is used to render the UI widget (layout + type) of a given field.

Selector

formly-field

Inputs

Name	Type	Description
field	FormlyFieldConfig	The field config.

FormlyForm

The <form-form> component is the main container of the form,
which takes care of managing the form state
and delegates the rendering of each field to <formly-field> component.

Selector

formly-form

Inputs

Name	Type	Description
fields	FormlyFieldConfig[]	The field configurations for building the form.
form	FormGroup|FormArray	The form instance which allow to track model value and validation status.
model	any	The model to be represented by the form.
options	FormlyFormOptions	Options for the form.

Outputs

Name	Type	Description
modelChange	EventEmitter	Event that is emitted when the model value is changed

FormlyValidationMessage

The <formly-validation-message> component renders the error message of a given field.

Selector

formly-validation-message

Inputs

Name	Type	Description
field	FormlyFieldConfig	The field config.

Directives

FieldArrayType

Selector

``

Inputs

Name	Type
field	F

FieldType

Selector

``

Inputs

Name	Type
field	F

FieldWrapper

Selector

``

Inputs

Name	Type
field	F

FormlyAttributes

Allow to link the field HTML attributes (id, name ...) and Event attributes (focus, blur ...) to an element in the DOM.

Selector

[formlyAttributes]

Inputs

Name	Type	Description
formlyAttributes	FormlyFieldConfig	The field config.
id	string

FormlyTemplate

Selector

[formlyTemplate]

Inputs

Name	Type
formlyTemplate	string

Services

FormlyConfig

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

Maintains list of formly config options. This can be used to register new field type.

Methods

Method	Description
addConfig(   config: ConfigOption ): void
addValidatorMessage(   name: string,   message: ): void
getType(   name: ,   throwIfNotFound: ): TypeOption
getValidator(   name: string ): ValidatorOption
getValidatorMessage(   name: string ): ValidationMessageOption
getWrapper(   name: string|Type<FieldWrapper> ): WrapperOption
setType(   options: TypeOption|TypeOption[] ): void	Allows you to specify a custom type which you can use in your field configuration. You can pass an object of options, or an array of objects of options.
setValidator(   options: ValidatorOption ): void
setWrapper(   options: WrapperOption ): void

FormlyFieldTemplates

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

FormlyFormBuilder

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

Methods

Method
build(   field: FormlyFieldConfig ): void
buildForm(   form: FormGroup|FormArray,   fieldGroup: FormlyFieldConfig[],   model: any,   options: FormlyFormOptions ): void

Interfaces

ConfigOption

Parameters

Name	Type
extensions	ExtensionOption[]
extras	literal type
presets	PresetOption[]
types	TypeOption[]
validationMessages	ValidationMessageOption[]
validators	ValidatorOption[]
wrappers	WrapperOption[]

FormlyFieldConfig

Parameters

Name	Type	Description
asyncValidators	FormlyValidation<AsyncValidatorFn\|Promise\|Observable>	Use this one for anything that needs to validate asynchronously. Pretty much exactly the same as the validators api, except it must be a function that returns a promise.
className	string	You can specify your own class that will be applied to the formly-field component.
defaultValue	any	Use defaultValue to initialize it the model. If this is provided and the value of the model at compile-time is undefined, then the value of the model will be assigned to defaultValue.
expressionProperties	literal type	An object where the key is a property to be set on the main field config and the value is an expression used to assign that property.
expressions	FieldExpressions	An object where the key is a property to be set on the main field config and the value is an expression used to assign that property.
fieldArray	FormlyFieldConfig
fieldGroup	FormlyFieldConfig[]	A field group is a way to group fields together, making advanced layout very simple. It can also be used to group fields that are associated with the same model (useful if it's different than the model for the rest of the fields).
fieldGroupClassName	string	Specify your own class that will be applied to the formly-group component.
focus	boolean	Whether to focus or blur the element field. Defaults to false. If you wish this to be conditional use expressions
form	FormGroup|FormArray	The parent form.
formControl	AbstractControl	This is the FormControl for the field. It provides you more control like running validators, calculating status, and resetting state.
get	function	Returns child field by key name
hide	boolean	Whether to hide the field. Defaults to false. If you wish this to be conditional use expressions: { hide: ... }
hideExpression	boolean|string	Conditionally hiding Field based on values from other Fields
hooks	FormlyHookConfig
id	string	This allows you to specify the id of your field. Note, the id is generated if not set.
key	string|number|(string|number)[]	The key that relates to the model. This will link the field value to the model
model	any	The model that stores all the data, where the model[key] is the value of the field
modelOptions	literal type	An object with a few useful properties to control the model changes debounce: integer value which contains the debounce model update value in milliseconds. A value of 0 triggers an immediate update. updateOn: string event value that instructs when the control should be updated
name	string	If you wish, you can specify a specific name for your field. This is useful if you're posting the form to a server using techniques of yester-year.
options	FormlyFormOptions	The form options.
optionsTypes	string[]
parent	FormlyFieldConfig	The parent field.
parsers	(function)[]	Array of functions to execute, as a pipeline, whenever the model updates, usually via user input.
props	Props	This is reserved for the templates. Any template-specific options go in here. Look at your specific template implementation to know the options required for this.
resetOnHide	boolean	Whether to reset the value on hide or not. Defaults to true.
template	string	Can be set instead of type to render custom html content.
templateOptions	FormlyTemplateOptions
type	string|Type<FieldType>	This should be a formly-field type added either by you or a plugin. More information over at Creating Formly Fields.
validation	literal type	An object with a few useful properties validation.messages: A map of message names that will be displayed when the field has errors. validation.show: A boolean you as the developer can set to force displaying errors whatever the state of field. This is useful when you're trying to call the user's attention to some fields for some reason.
validators	FormlyValidation<ValidatorFn\|boolean>	Used to set validation rules for a particular field. Should be an object of key - value pairs. The value can either be an expression to evaluate or a function to run. Each should return a boolean value, returning true when the field is valid. See Validation for more information.
wrappers	(string|Type<FieldWrapper>	It is expected to be the name of the wrappers. The formly field template will be wrapped by the first wrapper, then the second, then the third, etc. You can also specify these as part of a type (which is the recommended approach).

FormlyFormOptions

Parameters

Name	Type
build	function
checkExpressions	function
detectChanges	function
fieldChanges	Subject<FormlyValueChangeEvent>
formState	any
parentForm	FormGroupDirective|null
resetModel	function
showError	function
updateInitialValue	function

TypeOption

Parameters

Name	Type
component	Type<FieldType>
defaultOptions	FormlyFieldConfig
extends	string
name	string
wrappers	string[]

ValidationMessageOption

Parameters

Name	Type
message	string
name	string

ValidatorOption

Parameters

Name	Type
name	string
options	literal type
validation	FieldValidatorFn

WrapperOption

Parameters

Name	Type
component	Type<FieldWrapper>
name	string
types	string[]