Thread
#compose
    r

    Reprator

    2 years ago
    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

    2 years ago
    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

    2 years ago
    @Joost Klitsie i had gone through the documentation, but i hadn't find any useful information there
    j

    Joost Klitsie

    2 years ago
    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

    2 years ago
    even after making composable, how can i reference this view to set error
    j

    Joost Klitsie

    2 years ago
    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:
    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 🙂