Formulaires réactifs typés
Créez des formulaires avec un typage strict
Formulaires réactifs typés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Pourquoi utiliser des formulaires typés ?
Avant Angular 14, les valeurs des formulaires réactifs étaient typées comme any. Les formulaires réactifs typés offrent une sécurité de typage complète : le compilateur connaît la structure de la valeur de votre formulaire et les noms de ses contrôles.
Un FormControl typé
Un FormControl est générique. Indiquez le type de la valeur afin que les lectures et les écritures soient vérifiées.
const name = new FormControl<string>('', {
nonNullable: true
});Un FormGroup typé
Un FormGroup déduit le type de sa valeur à partir des contrôles que vous lui transmettez.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Type de valeur déduit
La value du groupe ci-dessus est typée comme { email: string | null; age: number | null } et entièrement vérifiée lors de la compilation.
const v = form.value; // typed automaticallyNullabilité
Par défaut, les contrôles peuvent être réinitialisés à null ; leur type de valeur inclut donc | null. Utilisez nonNullable pour exclure null.
new FormControl('', { nonNullable: true });
// value type: string (no null)Accéder aux contrôles en toute sécurité
form.controls.email est fortement typé : les fautes de frappe dans les noms de contrôles sont donc détectées par le compilateur.
form.controls.email.setValue('a@b.com');get ou controls
Préférez form.controls.name à form.get('name') pour bénéficier de la sécurité de typage ; get renvoie un AbstractControl | null faiblement typé.
getRawValue
getRawValue() renvoie toutes les valeurs, y compris celles des contrôles désactivés, contrairement à value, qui omet ces contrôles.
const all = form.getRawValue();Groupes imbriqués
Les groupes typés se composent entre eux. Un FormGroup imbriqué ajoute sa propre structure typée à la valeur du groupe parent.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Sécurité de typage de patchValue
patchValue accepte une partie de la valeur du formulaire ; les clés inconnues sont signalées par le compilateur.
form.patchValue({ email: 'x@y.com' });Migrer les anciens formulaires
Des API non typées telles que UntypedFormGroup permettent une migration progressive. Le nouveau code doit utiliser les classes typées pour plus de sécurité.
Vérification rapide
Vérifiez votre compréhension des formulaires réactifs typés.
Récapitulatif
Vous avez appris que les formulaires réactifs typés rendent FormControl/FormGroup génériques et déduisent une structure de valeur vérifiée, que les valeurs par défaut incluent | null (ce qui peut être évité avec nonNullable) et que l’accès via controls est plus sûr que via get.
Questions Fréquemment Posées
La leçon « Formulaires réactifs typés » est-elle gratuite ?
Oui — le texte complet de « Formulaires réactifs typés » 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 « Formulaires réactifs typés » ?
Créez des formulaires avec un typage strict 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 1 sur 4.
Combien de temps prend la leçon « Formulaires réactifs typés » ?
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
- Formulaires réactifs typés
- FormArray et champs dynamiques
- Validateurs asynchrones
- Modèles avec FormBuilder