Skip to main content

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

NameTypeDescription
fieldFormlyFieldConfigThe 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

NameTypeDescription
fieldsFormlyFieldConfig[]The field configurations for building the form.
formFormGroup|FormArrayThe form instance which allow to track model value and validation status.
modelanyThe model to be represented by the form.
optionsFormlyFormOptionsOptions for the form.

Outputs

NameTypeDescription
modelChangeEventEmitterEvent 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

NameTypeDescription
fieldFormlyFieldConfigThe field config.

Directives

FieldArrayType

Selector

``

Inputs

NameType
fieldF

FieldType

Selector

``

Inputs

NameType
fieldF

FieldWrapper

Selector

``

Inputs

NameType
fieldF

FormlyAttributes

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

Selector

[formlyAttributes]

Inputs

NameTypeDescription
formlyAttributesFormlyFieldConfigThe field config.
idstring

FormlyTemplate

Selector

[formlyTemplate]

Inputs

NameType
formlyTemplatestring

Services

FormlyConfig

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

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

Methods

MethodDescription
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

NameType
extensionsExtensionOption[]
extrasliteral type
presetsPresetOption[]
typesTypeOption[]
validationMessagesValidationMessageOption[]
validatorsValidatorOption[]
wrappersWrapperOption[]

FormlyFieldConfig

Parameters

NameTypeDescription
asyncValidatorsFormlyValidation<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.
classNamestringYou can specify your own class that will be applied to the formly-field component.
defaultValueanyUse 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.
expressionPropertiesliteral typeAn 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.
expressionsliteral typeAn 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.
fieldArrayFormlyFieldConfig
fieldGroupFormlyFieldConfig[]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).
fieldGroupClassNamestringSpecify your own class that will be applied to the formly-group component.
focusbooleanWhether to focus or blur the element field. Defaults to false. If you wish this to be conditional use expressions
formFormGroup|FormArrayThe parent form.
formControlAbstractControlThis is the FormControl for the field.
It provides you more control like running validators, calculating status, and resetting state.
getfunctionReturns child field by key name
hidebooleanWhether to hide the field. Defaults to false. If you wish this to be conditional use expressions: { hide: ... }
hideExpressionboolean|stringConditionally hiding Field based on values from other Fields
hooksFormlyHookConfig
idstringThis allows you to specify the id of your field. Note, the id is generated if not set.
keystring|number|(string|number)[]The key that relates to the model. This will link the field value to the model
modelanyThe model that stores all the data, where the model[key] is the value of the field
modelOptionsliteral typeAn 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


namestringIf 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.
optionsFormlyFormOptionsThe form options.
optionsTypesstring[]
parentFormlyFieldConfigThe parent field.
parsers(function)[]Array of functions to execute, as a pipeline, whenever the model updates, usually via user input.
propsPropsThis 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.
resetOnHidebooleanWhether to reset the value on hide or not. Defaults to true.
templatestringCan be set instead of type to render custom html content.
templateOptionsFormlyTemplateOptions
typestring|Type<FieldType>This should be a formly-field type added either by you or a plugin. More information over at Creating Formly Fields.
validationliteral typeAn 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.


validatorsFormlyValidation<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

NameType
buildfunction
checkExpressionsfunction
detectChangesfunction
fieldChangesSubject<FormlyValueChangeEvent>
formStateany
parentFormFormGroupDirective|null
resetModelfunction
showErrorfunction
updateInitialValuefunction

TypeOption

Parameters

NameType
componentType<FieldType>
defaultOptionsFormlyFieldConfig
extendsstring
namestring
wrappersstring[]

ValidationMessageOption

Parameters

NameType
messagestring
namestring

ValidatorOption

Parameters

NameType
namestring
optionsliteral type
validationFieldValidatorFn

WrapperOption

Parameters

NameType
componentType<FieldWrapper>
namestring
typesstring[]