Material UI library

The Material configuration uses @ngx-formly/material. This page documents the field types and properties configured in the Formly Studio demo for Material forms.

For the extended field set, see Studio Material.

Form controls

Input

• Formly type: input
• Use it for: Single-line text, email, password, telephone, URL, or number input.
• Properties: Key, Default Value, Label, Placeholder, Description, Type, Readonly, Hide, Expressions.
• Validation: Required, Show Validation, Min Length, Max Length, Pattern, custom validation, and async validation.
• Wrapper properties: Float Label, Hide Label, and Hide Required Marker.

Text

• Formly type: string
• Use it for: A general text value.
• Properties: Key, Default Value, Label, Placeholder, Description, Readonly, Hide, Expressions.
• Validation: Required, Show Validation, Min Length, Max Length, and Pattern.

The built-in Email preset creates an input field with email behavior.

Number

• Formly type: number
• Use it for: A numeric value.
• Properties: Key, Default Value, Label, Placeholder, Description, Readonly, Hide, Expressions.
• Validation: Required, Show Validation, Min, and Max.

Textarea

• Formly type: textarea
• Use it for: Longer text such as messages or notes.
• Properties: Key, Default Value, Label, Placeholder, Description, Rows, Auto Size, Auto Size Min Rows, Auto Size Max Rows, Readonly, Hide, Expressions.
• Validation: Required, Show Validation, Min Length, and Max Length.

Date

• Formly type: datepicker
• Use it for: A date selected from a calendar.
• Properties: Key, Default Value, Label, Placeholder, Description, Start View, Toggle Position, Touch UI, Readonly, Hide, Expressions.
• Validation: Required and Show Validation.

Checkbox

• Formly type: checkbox
• Use it for: A boolean value or required acknowledgement.
• Properties: Key, Default Value, Label, Description, Label Position, Indeterminate, Hide, Expressions.
• Validation: Required and Show Validation.

Radio

• Formly type: radio
• Use it for: One choice from a visible set of options.
• Properties: Key, Default Value, Label, Description, Label Position, Options, Hide, Expressions.
• Each option has a Label, Value, and Disabled setting.
• Validation: Required and Show Validation.

Multi Checkbox

• Formly type: multicheckbox
• Use it for: Multiple choices from a visible set of options.
• Properties: Key, Default Value, Label, Description, Label Position, Options, Hide, Expressions.
• Each option has a Label, Value, and Disabled setting.
• Validation: Required and Show Validation.

Toggle

• Formly type: toggle
• Use it for: A compact boolean choice.
• Properties: Key, Default Value, Label, Description, Label Position, Hide, Expressions.
• Validation: Required and Show Validation.

Select

• Formly type: select
• Use it for: One or more choices from a dropdown list.
• Properties: Key, Default Value, Label, Placeholder, Description, Multiple Selections, Select All Options Label, Options, Hide, Expressions.
• Each option has a Label, Value, and Disabled setting.
• Validation: Required and Show Validation.

Containers

Group

• Formly type: formly-group
• Use it for: A section that contains related fields.
• Properties: Key, Hide, and Expressions.

See Add and configure fields for the Field Edit workflow and Structure fields for containers.