Skip to main content

moko-fields

Библиотека moko-fields позволяет реализовывать формы ввода, а также их валидацию в общем коде.




FormField​

Потребность в библиотеке возникла из-за того, что для создания логики формы ввода в общем коде необходимы следующие элементы:

  • LiveData/StateFlow(String) - текст поля
  • LiveData/StateFlow(Bool) - валидно/невалидно поле
  • LiveData/StateFlow(String) - текст ошибки валидации

А представьте, что у вас 7 или 8 таких полей, получится много однотипного кода, в котором легко будет запутаться и допустить ошибку.

Библиотека позволяет использовать специальный класс FormField для форм ввода, который включает в себя все эти три лайвдаты/стейт флоу.

Для создания FormField необходимо только установить тип и задать валидацию для этого значения. Тип поля не обязательно должен быть String, подойдет любой, который можно как-то установить: int, bitmap, data и тд.

Для Jetpack Compose и Compose Multiplatform двусторонная связка для передачи значения введенного текста поля в View Model не работает, необходимо реализовывать на UI TextField c onValueChange.
В коде экрана:

val (code, onCodeChange) = viewModel.code.data.collectAsMutableState()

AuthCodeContent(
    code = code,
    onCodeChange = onCodeChange,
    codeError = viewModel.code.error.collectAsState().value?.localized(),
    ...
)

В контенте экрана:

@Composable
fun AuthCodeContent(
    code: String,
    onCodeChange: (String) -> Unit,
    codeError: String?,
    ...
) {
    ...
    BasicTextField(
        ...
        value = code,
        onValueChange = { newValue ->
            onCodeChange(newValue)
        },
        isError = codeError !=null
    )
    ...
}

Валидация​

Разберем, как добавлять валидацию в FormField:

Как можно настроить валидацию:

  • валидацию можно вызвать в любой момент. Зачем это?
    • при первом вводе юзера - валидация не должна проверяться, пока он не закончит ввод до конца, и не нажмет кнопку, к которой будет привязана валидация, чтобы, пока он еще не ввел все, что задумал, у него не светились ошибки.
  • поля можно объединить в список и валидировать их одновременно
  • валидация полей может быть завязана на других полях (пароль + повторите пароль)
  • у FormField есть поле isValid и validationError