Home FORMLY
Guides
UI
Examples
GitHub GitHub
Guides
UI
Examples
Intro Introduction Example
Field Options Expression Properties
Default Value
Hide Fields
modelOptions
Form Options Reset Model
Form State
Validation Options Built-in validations
Custom validation
Custom Validation parameters
Validation message
Async validation of unique value
Async validation and `updateOn`
Matching Two Fields
Force showing error state
Toggle required field
Disable submit button
Bootstrap Formly Table Rows
Select
Bootstrap Specific Advanced Layout
Bootstrap Horizontal
Input add-ons
Advanced i18n ngx-translate
i18n ngx-translate (alternative approach)
Json schema
Repeating Section
Repeating Section With Length Input
Multi-Step Form
Tabs Form
ag-grid Integration
ngx-datatable Integration
Other Cascaded Select (using observable)
Cascaded Select JSON powered
Bind Observable to Select
Advanced Layout (Flex)
Nested Forms (fieldGroup wrapper)
Material Field Prefix/Suffix
Hide Fields with `@angular/animations`
Button Type
JSON powered
File input
Datatable
This demonstrates using ngx-datatable inside of a custom type in order to create an input datatable.
Personal data
Name of Investment
Date of Investment
Stock Identifier
0 selected / 3 total

Form Data

[object Object]
Object{name:name1, surname:surname1, investments:Array[3]}
name:"name1"
surname:"surname1"
investments:Array[3][0, 1, 2]
0:Object{investmentName:project1, investmentDate:, stockIdentifier:1}
investmentName:"project1"
investmentDate:""
stockIdentifier:1
1:Object{investmentName:project2, investmentDate:, stockIdentifier:2}
investmentName:"project2"
investmentDate:""
stockIdentifier:2
2:Object{investmentName:project3, investmentDate:, stockIdentifier:3}
investmentName:"project3"
investmentDate:""
stockIdentifier:3