Validate input (#347)

* Code snippet for Compose doc at https://developer.android.com/quick-guides/content/animate-text?hl=en (Animate text character-by-character).

This commit slightly modifies (makes buildable in our repo) the existing code on the current DAC page.

That code, in turn, was BNR's simplified version of Xoogler astamato's Medium article at https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5

* Code snippet for Compose doc at https://developer.android.com/quick-guides/content/animate-text?hl=en (Animate text character-by-character).

This commit slightly modifies (makes buildable in our repo) the existing code on the current DAC page.

That code, in turn, was BNR's simplified version of Xoogler astamato's Medium article at https://medium.com/androiddevelopers/effective-state-management-for-textfield-in-compose-d6e5b070fbe5

* Apply Spotless

* Fix email input snippet

* Apply Spotless

---------

Co-authored-by: thedmail <[email protected]>
Co-authored-by: Rebecca Franks <[email protected]>
Co-authored-by: riggaroo <[email protected]>

Author: thedmail

compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt

@@ -18,6 +18,7 @@
 
 package com.example.compose.snippets.text
 
+import android.graphics.Typeface
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.background
 import androidx.compose.foundation.basicMarquee
@@ -43,6 +44,7 @@ import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -86,6 +88,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewmodel.compose.viewModel
 
 /**
  * This file lets DevRel track changes to snippets present in
@@ -523,7 +526,7 @@ private object TextEffectiveStateManagement1 {
 private object TextEffectiveStateManagement2 {
     class UserRepository
 
-    val viewModel = SignUpViewModel(UserRepository())
+    private val viewModel = SignUpViewModel(UserRepository())
 
     // [START android_compose_text_state_management]
     // SignUpViewModel.kt
@@ -851,7 +854,7 @@ class NanpVisualTransformation() : VisualTransformation {
 }
 // [END android_compose_text_auto_format_phone_number_transformtext]
 
-private val firaSansFamily = FontFamily()
+private val firaSansFamily = FontFamily(typeface = Typeface.DEFAULT)
 
 val LightBlue = Color(0xFF0066FF)
 val Purple = Color(0xFF800080)
@@ -888,3 +891,56 @@ fun PasswordTextField() {
     )
 }
 // [END android_compose_text_showhidepassword]
+
+// [START android_compose_text_auto_format_phone_number_validatetext]
+class EmailViewModel : ViewModel() {
+    var email by mutableStateOf("")
+        private set
+
+    val emailHasErrors by derivedStateOf {
+        if (email.isNotEmpty()) {
+            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
+            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
+        } else {
+            false
+        }
+    }
+
+    fun updateEmail(input: String) {
+        email = input
+    }
+}
+
+@Composable
+fun ValidatingInputTextField(
+    email: String,
+    updateState: (String) -> Unit,
+    validatorHasErrors: Boolean
+) {
+    OutlinedTextField(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(10.dp),
+        value = email,
+        onValueChange = updateState,
+        label = { Text("Email") },
+        isError = validatorHasErrors,
+        supportingText = {
+            if (validatorHasErrors) {
+                Text("Incorrect email format.")
+            }
+        }
+    )
+}
+
+@Preview
+@Composable
+fun ValidateInput() {
+    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
+    ValidatingInputTextField(
+        email = emailViewModel.email,
+        updateState = { input -> emailViewModel.updateEmail(input) },
+        validatorHasErrors = emailViewModel.emailHasErrors
+    )
+}
+// [END android_compose_text_auto_format_phone_number_validatetext]