Angular Academy · Leçon

Entrées obligatoires et transformées

Marquez les entrées comme obligatoires et transformez leurs valeurs.

Entrées obligatoires et transformées est une leçon Angular 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 Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Au-delà des entrées de base

Les entrées signal prennent en charge deux fonctionnalités puissantes : marquer une entrée comme obligatoire et transformer les valeurs reçues avant leur stockage.

Entrées obligatoires

Utilisez input.required() lorsque le parent doit toujours fournir une valeur. Il n’y a pas de valeur par défaut.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Pourquoi les entrées obligatoires sont importantes

Si une entrée obligatoire n’est pas liée, Angular signale une erreur, ce qui permet de détecter rapidement les erreurs au lieu de laisser passer une valeur indéfinie.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Les entrées obligatoires sont non nulles

Comme une entrée obligatoire doit être fournie, son type ne peut jamais être indéfini. Vous pouvez donc la lire sans effectuer de vérifications de nullité.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Transformer les entrées

L’option transform exécute une fonction sur la valeur reçue avant son stockage, ce qui est utile pour la conversion de type.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Conversion booléenne

Angular fournit booleanAttribute pour convertir les valeurs de type attribut en véritables booléens, ce qui est pratique pour les attributs fondés sur la présence.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Conversion numérique

De même, numberAttribute convertit un attribut chaîne en nombre.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Fonctions de transformation personnalisées

Vous pouvez écrire n’importe quelle transformation pour normaliser les valeurs, par exemple pour supprimer les espaces superflus des chaînes.

label = input("", {
  transform: (v: string) => v.trim()
});

Types d’entrée et de sortie de la transformation

Une transformation peut accepter un type et en stocker un autre. Le type accepté est celui que les parents lient ; le type stocké est celui que vous lisez.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Obligatoire et transformation combinées

Vous pouvez combiner le caractère obligatoire avec une transformation en transmettant l’objet d’options à input.required().

value = input.required({
  transform: numberAttribute
});

Quand utiliser chaque fonctionnalité

Utilisez le caractère obligatoire pour imposer une liaison indispensable, et les transformations pour convertir ou normaliser les données reçues, afin de conserver une logique de composant claire et cohérente.

Vérification rapide

Vérifiez votre compréhension des entrées obligatoires et transformées.

Récapitulatif

Utilisez input.required() pour les entrées obligatoires (non nullables et sans valeur par défaut), ainsi que l’option transform, notamment avec booleanAttribute et numberAttribute, pour convertir les valeurs. Les deux fonctionnalités peuvent être combinées.

Questions Fréquemment Posées

La leçon « Entrées obligatoires et transformées » est-elle gratuite ?

Oui — le texte complet de « Entrées obligatoires et transformées » 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 Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Entrées obligatoires et transformées » ?

Marquez les entrées comme obligatoires et transformez leurs valeurs. Tu pratiques Angular 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 Angular Academy ?

Aucune expérience préalable n'est requise. Angular 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 « Entrées obligatoires et transformées » ?

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 Angular Academy ?

Oui. Chaque leçon Angular 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 à Angular Academy