https://kotlinlang.org logo
#compose
Title
# compose
r

Reprator

08/24/2020, 2:04 AM
Copy code
TextField(
    value = textValue,
    keyboardType = KeyboardType.Phone,
    imeAction = ImeAction.Done,
    onValueChange = { textValue = it },
    label = { Text("Enter Your Phone Number") },
    placeholder = { Text(text = "904353455") },
    onImeActionPerformed = { imeAction: ImeAction, softwareKeyboardController: SoftwareKeyboardController? ->
        if (imeAction == ImeAction.Done) {
            if(textValue.text.isEmpty()){
                return@TextField
            }

        }
    },
    modifier = Modifier.fillMaxWidth()
)
I want to set error on this text field for phone number, but i don't find any errortext, please let me know how can i set the error on textfield
j

Joost Klitsie

08/24/2020, 6:43 AM
You can try to use a material text field, they should have the error fields included
It is the same as with Android views, by themselves they only have simple things and you would have to create such error fields yourself, or use a library, like the material library, that does it for you
r

Reprator

08/24/2020, 12:03 PM
@Joost Klitsie i had gone through the documentation, but i hadn't find any useful information there
j

Joost Klitsie

08/24/2020, 12:18 PM
I was expecting that to be in there to be honest
But apparently not
Perhaps you can make your own composable for the time being, column including a text field and an error text
r

Reprator

08/24/2020, 4:00 PM
even after making composable, how can i reference this view to set error
j

Joost Klitsie

08/25/2020, 7:47 AM
You don't reference a view in compose, that is the whole point of compose 🙂 You should create a state that contains the error, and then update the view from that state. As soon as the user types something, you will have an onValueChange callback which you can use to update the original state. This could be an example:
Copy code
data class ViewState(
    val textInput: String?,
    val error: String?
)

@ExperimentalAnimationApi
@Composable
fun SomeComposable() {
    val viewState = remember { mutableStateOf(ViewState("", null)) }
    OutlinedTextViewWithError(
        value = viewState.value.textInput ?: "",
        onValueChange = { newValue -> 
            viewState.value = viewState.value.copy(
                textInput = newValue,
                error = if (newValue.contains("@")) "Don't use '@' character" else null)
        },
        error = viewState.value.error
    )

}

@ExperimentalAnimationApi
@Composable
fun OutlinedTextViewWithError(value: String, onValueChange: (String) -> Unit, error: String?) {
    val isError = error != null
    Column {
        OutlinedTextField(
            value = value,
            onValueChange = onValueChange,
            isErrorValue = isError,
            label = {})
        AnimatedVisibility(visible = isError) {
            Text(text = error ?: "", color = MaterialTheme.colors.error, style = MaterialTheme.typography.caption) // Choose the appropriate style
        }
    }

}
I didn't run this code but I am sure you can figure it out 🙂
6 Views