FormControlComponent

open class FormControlComponent : Component<Unit> , FormProperties

This component class manages the configuration of a formControl and some render centric functionalities. The former are important for clients of a formControl, the latter for extending or changing the default behaviors.

A formControl can be configured in different aspects:

  • a label for a description of the control as a whole

  • mark the control as required

  • an optional helper text

  • provide a validation message as a Flow<ComponentValidationMessage>]; the severity is reflected by the default theme!

  • disable the control

  • provide a store to the control itself, with optional additional validation (dev.fritz2.components.validation.WithValidator) at best, in order to automatically apply model validation and get the results shown

Customizing the control:

To add a new control, extend this class and add a new control function that wraps the desired control component factory function like FormControlComponent.inputField, FormControlComponent.selectField, FormControlComponent.checkbox, FormControlComponent.checkboxGroup and FormControlComponent.radioGroup do.

In order to simply change the target of some of the default control wrapping function to a different control component, extend this class and override the desired function. Be aware that you cannot provide default arguments for an overridden function, so you must offer a new function with default arguments that just directs to the overridden one.

Be aware of the render strategy - pick whether your control should be rendered as a single control or a group.

If those do not fit, just implement the ControlRenderer interface and pair it with the string based key of the related control wrapping function. Have a look at the init block, renderStrategies field and Control.assignee field to learn how the mapping between control and rendering strategy is done.

Constructors

FormControlComponent
Link copied to clipboard
js
fun FormControlComponent()

Types

Companion
Link copied to clipboard
js
object Companion
Control
Link copied to clipboard
js
class Control
FormSizeContext
Link copied to clipboard
js
object FormSizeContext
ValidationResult
Link copied to clipboard
js
class ValidationResult(messages: Flow<List<ComponentValidationMessage>>?)

Functions

checkbox
Link copied to clipboard
js
open fun checkbox(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass = StyleClass.None, value: Store<Boolean>? = null, id: String? = null, prefix: String = ControlNames.checkbox, build: CheckboxComponent.() -> Unit = {})
checkboxGroup
Link copied to clipboard
js
open fun <T> checkboxGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, values: Store<List<T>>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.checkboxGroup, build: CheckboxGroupComponent<T>.() -> Unit = {})
enabled
Link copied to clipboard
js
open override fun enabled(value: Boolean)
open override fun enabled(value: Flow<Boolean>)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
inputField
Link copied to clipboard
js
open fun inputField(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.inputField, build: InputFieldComponent.() -> Unit = {})
ownSize
Link copied to clipboard
js
fun ownSize(): Style<BasicParams>
radioGroup
Link copied to clipboard
js
open fun <T> radioGroup(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.radioGroup, build: RadioGroupComponent<T>.() -> Unit = {})
render
Link copied to clipboard
js
open override fun render(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass, id: String?, prefix: String)
Central method that should do the actual rendering of a component.
renderHelperText
Link copied to clipboard
js
open fun renderHelperText(renderContext: RenderContext)
renderValidationMessages
Link copied to clipboard
js
open fun renderValidationMessages(renderContext: RenderContext)
selectField
Link copied to clipboard
js
open fun <T> selectField(styling: BasicParams.() -> Unit = {}, items: List<T>, value: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.selectField, build: SelectFieldComponent<T>.() -> Unit = {})
switch
Link copied to clipboard
js
open fun switch(styling: BasicParams.() -> Unit = {}, value: Store<Boolean>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.switch, build: SwitchComponent.() -> Unit = {})
textArea
Link copied to clipboard
js
open fun textArea(styling: BasicParams.() -> Unit = {}, store: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = ControlNames.textArea, build: TextAreaComponent.() -> Unit = {})
toString
Link copied to clipboard
js
open fun toString(): String

Properties

disabled
Link copied to clipboard
js
open override val disabled: DynamicComponentProperty<Boolean>
helperText
Link copied to clipboard
js
val helperText: ComponentProperty<String?>
helperTextStyle
Link copied to clipboard
js
val helperTextStyle: ComponentProperty<Style<BasicParams>>
label
Link copied to clipboard
js
val label: ComponentProperty<String>
labelStyle
Link copied to clipboard
js
val labelStyle: ComponentProperty<Style<BasicParams>>
validationMessage
Link copied to clipboard
js
val validationMessage: ComponentProperty<() -> Flow<ComponentValidationMessage?>?>
validationMessageRendering
Link copied to clipboard
js
val validationMessageRendering: ComponentProperty<RenderContext.(ComponentValidationMessage) -> Unit>
validationMessages
Link copied to clipboard
js
val validationMessages: ComponentProperty<() -> Flow<List<ComponentValidationMessage>>?>