Android Academy · Leçon

Gérer l’état d’un formulaire

Conservez et mettez à jour les valeurs des champs avec l’état.

Gérer l’état d’un formulaire est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

D’un champ à un formulaire

Un seul champ de texte est simple. Un formulaire réel en comporte plusieurs : nom, adresse e-mail, mot de passe, et parfois une case à cocher. Dans cette leçon, vous apprendrez des façons claires de conserver et de mettre à jour l’état d’un formulaire entier dans Jetpack Compose.

Une fois ce fonctionnement maîtrisé, la validation, l’envoi et les aperçus deviennent simples.

Plusieurs états indépendants

L’approche la plus simple consiste à utiliser un mutableStateOf par champ. Chaque champ lit et met à jour sa propre partie de l’état.

Cette approche convient parfaitement aux petits formulaires de deux ou trois champs.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Regrouper l’état dans une classe de données

À mesure que les formulaires grandissent, de nombreuses variables séparées deviennent difficiles à gérer. Une solution plus claire consiste à représenter l’ensemble du formulaire sous la forme d’une seule data class immuable.

Vous conservez un seul élément d’état contenant cet objet et le mettez à jour avec copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Mettre à jour avec copy()

Comme l’objet d’état est immuable, vous ne le modifiez jamais directement. Vous créez plutôt une nouvelle copie dont un champ a changé, puis vous la réaffectez.

Le modèle d’état de Compose reste ainsi prévisible : un nouvel objet signifie un nouvel instantané, ce qui déclenche une recomposition.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Un formulaire entièrement basé sur une classe de données

Ici, l'ensemble du formulaire est piloté par un seul SignUpState. Chaque champ met à jour une propriété unique via copy().

Remarquez comme il est facile de lire la valeur de l'ensemble du formulaire à tout moment : il suffit de consulter form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Cases à cocher et interrupteurs

Toutes les saisies ne sont pas du texte. Un Checkbox ou un Switch fonctionne de la même manière : une valeur booléenne et un rappel onCheckedChange.

Stockez la valeur booléenne dans l'état de votre formulaire, exactement comme une chaîne de caractères.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Dériver des valeurs à partir de l'état

L'un des grands avantages d'un état à source unique est que vous pouvez en déduire des éléments sans stocker de variables supplémentaires. Par exemple, vous pouvez déterminer si le formulaire est prêt à être envoyé.

Utilisez derivedStateOf (ou une simple expression) afin que le résultat soit automatiquement mis à jour lorsque le formulaire change.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Résister aux changements de configuration

remember conserve l'état lors des recompositions, mais celui-ci est perdu lors d'un changement de configuration, comme une rotation de l'écran. Pour conserver des valeurs simples après une rotation, utilisez rememberSaveable.

Cela fonctionne directement avec les types primitifs et les types Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Remonter l'état du formulaire dans un ViewModel

Pour tout formulaire qui dépasse le stade élémentaire, conservez l'état dans un ViewModel. Il survit aux changements de configuration et maintient la logique de l'interface en dehors du composable.

Le composable lit l'état et transmet les événements ; le ViewModel est la source de vérité.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Connecter le ViewModel

Dans le composable, récupérez le ViewModel et liez chaque champ à son état et à son gestionnaire. L'interface reste légère et facile à tester.

C'est la structure recommandée pour les formulaires destinés à la production.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Kotlin pur : copy() en action

Le modèle de mise à jour copy() n'est que le comportement standard des classes de données Kotlin. Ici, il fonctionne de manière autonome afin que vous puissiez voir comment chaque mise à jour produit un tout nouvel objet.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Vérification rapide

Vous modélisez votre formulaire sous la forme d'une data class immuable conservée dans l'état. Comment devez-vous mettre à jour un seul champ ?

Récapitulatif

Vous avez appris à gérer l'état de formulaires entiers :

Petits formulaires : un mutableStateOf par champ.
Formulaires plus grands : une seule data class immuable, mise à jour avec copy().
Les valeurs booléennes pilotent Checkbox et Switch de la même manière que le texte pilote les champs.
Déduisez les valeurs comme « peut être envoyé » au lieu de les stocker.
Utilisez rememberSaveable pour les rotations, et un ViewModel pour les vrais écrans.

Ensuite : valider les saisies et afficher des erreurs utiles.

Questions Fréquemment Posées

La leçon « Gérer l’état d’un formulaire » est-elle gratuite ?

Oui — le texte complet de « Gérer l’état d’un formulaire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Gérer l’état d’un formulaire » ?

Conservez et mettez à jour les valeurs des champs avec l’état. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Gérer l’état d’un formulaire » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy