How to better handle reusable compose component with error handling

Question

I am working on a process where when users want to change password, they are able to do that within a current password, new password, retypenewpassword flow. My challenge however has been with using my reusable outlined text field to handle the error. For example if the users enters an old password and it is wrong it shows below the outlinedTextField that wrong password was entered. Like the image I have attached

The challenge I experienced with Jetpack Compose is on the isError, for all 3 since I am using one but customizing output for each. I can not add my condition there to validate the error. Or maybe I am approaching this the wrong way. Here is my composable.

@Composable
fun UserInputTextField(
    fieldState: String,
    onFieldChange: (String) -> Unit,
    label: String,
    isError: Boolean = false
    modifier: Modifier = Modifier,
) {
    androidx.compose.material.OutlinedTextField(
        value = fieldState, onValueChange = {
            onFieldChange(it)
        },
        isError = isError
        label = { androidx.compose.material.Text(text = label) },
        modifier = modifier
            .fillMaxWidth()
            .padding(top = 16.dp)
           ,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Blue,
            unfocusedBorderColor = Color.Black
        )
    )
}

Now when I call my reusable, I want for all my three OutlinedEditText when there is an error display something like the image

My problem is, how can I display an error on all 3 UserInputTextField using the isError since the message has to be under the OutlinedTextField.

UserInputTextField(
                    fieldState = usernameState.value,
                    onFieldChange = { usernameState.value = it },
                    label = "Enter Name",
                    isError = if(state.usernameState.isValidPassword)... do something else print error?
        

)

score 0 · Answer 1 · answered Apr 26 '23 at 05:07

I am not sure about what you want, but I think that you just want to put a label under the OutlinedTextField.

Unfortunately, the Google composable doesn't have this attribute, but you can add it yourself.

If that is your case, you can add a Column around your OutlineTextField and add under a Text composable and style it. So you can add supportingLabel parameter for your UserInputTextField.

@Composable
fun UserInputTextField(
    fieldState: String,
    onFieldChange: (String) -> Unit,
    label: String,
    isError: Boolean = false,
    supportingLabel: String? = null,
    modifier: Modifier = Modifier
) {
    androidx.compose.material.Column { 
        androidx.compose.material.OutlinedTextField(
            value = fieldState, onValueChange = {
                onFieldChange(it)
            },
            isError = isError
            label = { Text(text = label) },
            modifier = modifier
                .fillMaxWidth()
                .padding(top = 16.dp),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = Color.Blue,
                unfocusedBorderColor = Color.Black
            )
        )
        androidx.compose.animation.AnimatedVisibility(
            visible = supportingLabel != null && isError
        ) {
            androidx.compose.material.Text(
                modifier = Modifier.padding(start = 12.dp),
                text = supportingLabel,
                style = MaterialTheme.typography.caption,
                color = Color.Red
            )
         }
    }
}

How to better handle reusable compose component with error handling

1 Answers1