Kotlin multi platform quickstart

In order to use FlowForms you just need to do the following in a common module

Declare a Form, its fields, and their validations using our FlowForms DSL :

class FormModel {

    var userName: String = "",
    var password: String = ""

    val form = flowForm {
        field(USERNAME, Required { userName })
        field(PASSWORD,
            Required { password },
            MinLength(MIN_PASSWORD_LENGTH) { password }
        )
    }

    companion object {
        const val USERNAME = "username"
        const val PASSWORD = "password"
        const val MIN_PASSWORD_LENGTH = 8
    }
}

In the above snippet we are declaring a form with two fields (Username & Password). Both fields are required and the password field also requires to have at least 8 characters.

How to use the library in a Kotlin module

1 : Listen to the fields and/or form status :

class Foo {
    ...
    private val formModel = FormModel()
    
    suspend fun listenToFlowFormStatus() = coroutineScope {
        formModel.form.fields.value.let {
            launch { it[FormModel.USERNAME]?.status?.collect(::onUserNameStatusChange) }
            launch { it[FormModel.PASSWORD]?.status?.collect(::onPasswordStatusChange) }
            launch { formModel.form.status.collect(::onFormStatusChange) }
        }
    }

    private fun onUserNameStatusChange(status: FieldStatus) {
        when (status.code) {
            REQUIRED_UNSATISFIED -> { /* Display required error */ }
            else -> { /* Hide any error text on this field */ }
        }
    }

    private fun onPasswordStatusChange(status: FieldStatus) {
        when (status.code) {
            REQUIRED_UNSATISFIED -> { /* Display required error */ }
            MIN_LENGTH_UNSATISFIED -> { /* Display password requires x characters error */ }
            else -> { /* Hide any error text on this field */ }
        }
    }

    private fun onFormStatusChange(status: FormStatus) {
        when (status.code) {
            CORRECT -> { /* Enable continue button */ }
            else -> { /* Disable continue button */ }
        }
    }
}

In the above snippet we are collecting (observing) our fields' status and reacting to its changes, like displaying an error message when the field is incorrect (ie. a field's validation failed) or hiding it when it becomes correct. Both REQUIRED_UNSATISFIED and MIN_LENGTH_UNSATISFIED are status codes of the fields' validations. Additionally, we are observing the general form status, which is updated whenever a field status change.

2 : Call the form’s validate functions whenever your inputs are affected :

class Foo {
    ...
    private val formModel = FormModel()

    // call this method after collecting the fields and form status
    private fun bindFields() {
        userNameInput.onTextChanged { value ->
            formModel.userName = "value"
            formModel.form.validateOnValueChange(formModel.USERNAME)
        }
        passwordInput.onTextChanged { value ->
            formModel.password = "value"
            formModel.form.validateOnValueChange(formModel.PASSWORD)
        }
    }
}

In the above snippet we are triggering the USERNAME field's validations whenever the text changes, these validations are the ones we specify when declaring the form in the Foo class.

And that’s one of the easiest forms we can create using FlowForms in KMP, we don’t need to care about managing the field’s status manually nor making any complex logic to enable or disable a continue or save changes button.

How to use the library in an iOS app

• Please refer to the iOS quickStart guide

How to use the library in an android app

• Please refer to the android quickStart guide

Example apps:

• For an android usage example you can review the android example app (there is an example using Activity and another one using Fragment).

• For an ios usage example you can review the ios example app (using swiftUI).

FlowForms’s full potential is better appreciated when making more complex forms. However, the example app and this guide may not cover all FlowForms’s features, so for a detailed list of all the available features please refer to the documentation index.