1
00:00:00,000 --> 00:00:04,979
[MUSIC]

2
00:00:04,979 --> 00:00:09,281
Faites-nous savoir brièvement les formes de valeur et le support de formulaires dans Angular.

3
00:00:09,281 --> 00:00:14,748
Nous avons déjà vu l'utilisation de formulaires dans le cours de bootstrap précédent et

4
00:00:14,748 --> 00:00:20,139
nous avons vu comment bootstrap nous permet de styliser les formulaires HDMI standard.

5
00:00:20,139 --> 00:00:24,664
Dans cette leçon, nous allons examiner le support angulaire pour les formes,

6
00:00:24,664 --> 00:00:30,200
deux types de formes différentes, les formes basées sur des modèles et les formes réactives.

7
00:00:30,200 --> 00:00:32,450
Nous allons examiner la différence entre les deux, et

8
00:00:32,450 --> 00:00:35,670
où chacun d'eux convient dans notre application Angular.

9
00:00:35,670 --> 00:00:39,400
Nous examinerons plus en détail les avantages et les inconvénients de chaque approche

10
00:00:39,400 --> 00:00:43,490
dans cette leçon et dans la prochaine leçon.

11
00:00:44,910 --> 00:00:50,880
Aussi, nous allons examiner la validation de formulaire, comment Angular prend en charge la validation de formulaire,

12
00:00:50,880 --> 00:00:55,600
et comment nous pouvons effectuer la validation de formulaire pour notre formulaire piloté par modèle

13
00:00:55,600 --> 00:01:00,420
dans la prochaine conférence, après l'exercice.

14
00:01:02,400 --> 00:01:06,867
Nous avons déjà réalisé que les formulaires supportent une expérience cohérente, efficace et

15
00:01:06,867 --> 00:01:10,230
convaincante de saisie de données pour les utilisateurs.

16
00:01:10,230 --> 00:01:14,350
Vous voyez des formulaires utilisés partout sur les sites Web.

17
00:01:14,350 --> 00:01:14,940
Par exemple,

18
00:01:14,940 --> 00:01:19,520
lorsque vous devez vous connecter à un site Web, vous devez saisir votre ID utilisateur et votre mot de passe.

19
00:01:19,520 --> 00:01:22,210
Ou quand vous avez besoin de soumettre des informations par exemple.

20
00:01:22,210 --> 00:01:26,871
Si vous réservez un billet de film, ou si vous passez une commande

21
00:01:26,871 --> 00:01:32,027
dans une épicerie en ligne, ou bien d'autres cas d'utilisation, les formulaires

22
00:01:32,027 --> 00:01:37,482
sont largement utilisés pour fournir aux utilisateurs

23
00:01:37,482 --> 00:01:43,360
un moyen complet d'entrer des informations sur les sites Web ou l'application Web.

24
00:01:43,360 --> 00:01:47,922
Le framework Angular fournit une prise en charge complète des formulaires

25
00:01:47,922 --> 00:01:51,670
, y compris la validation des formulaires et des formulaires.

26
00:01:51,670 --> 00:01:57,379
C'est là que nous profitons du support Angular pour la liaison de données bidirectionnelle

27
00:01:57,379 --> 00:02:03,690
et le suivi des changements que nous faisons dans les éléments de formulaire, ainsi que la validation de formulaire.

28
00:02:03,690 --> 00:02:07,030
Donc, lorsque vous entrez des données dans un champ d'entrée dans votre formulaire,

29
00:02:07,030 --> 00:02:11,330
les données sont automatiquement évaluées avec le support Angular pour les formulaires.

30
00:02:11,330 --> 00:02:15,980
Nous examinerons certains d'entre eux plus en détail au fur et à mesure des leçons.

31
00:02:15,980 --> 00:02:21,010
Permettez-moi de vous rappeler rapidement les formulaires HTML eux-mêmes.

32
00:02:21,010 --> 00:02:24,790
Vous savez déjà que les formulaires sont pris en charge par l'élément form

33
00:02:25,910 --> 00:02:28,200
de votre page HTML.

34
00:02:28,200 --> 00:02:32,734
Avec l'élément form, dans la balise form, vous pouvez également inclure des choses

35
00:02:32,734 --> 00:02:37,561
like <input>, <textarea>, <select>, et <button>s, et bien d'autres.

36
00:02:37,561 --> 00:02:42,585
Nous allons voir comment le support Angular fonctionne avec les éléments de formulaire HTML

37
00:02:42,585 --> 00:02:47,608
, nous permettre de concevoir deux types de formes différents,

38
00:02:47,608 --> 00:02:52,292
formes pilotées par modèle et aussi des formes réactives dans Angular.

39
00:02:52,292 --> 00:02:58,585
Dans cette leçon, nous allons nous concentrer sur le support angulaire pour les formes pilotées par modèle.

40
00:02:58,585 --> 00:03:03,125
Dans un formulaire piloté par modèle, ils utiliseront le modèle Angular avec

41
00:03:03,125 --> 00:03:07,250
les éléments de formulaire que nous venons de voir pour construire des formulaires et

42
00:03:07,250 --> 00:03:10,646
utiliser le support Angular pour les formulaires pilotés par modèle.

43
00:03:10,646 --> 00:03:15,432
Et nous serons en mesure de lier les directives spécifiques à la forme angulaire aux éléments de forme

44
00:03:15,432 --> 00:03:20,450
dans nos modèles, puis de tirer parti de la liaison de données bidirectionnelle

45
00:03:20,450 --> 00:03:25,336
qui forme également la validation et le soutien des erreurs que Angular nous fournit.

46
00:03:25,336 --> 00:03:28,128
Dans l'exercice qui suit immédiatement,

47
00:03:28,128 --> 00:03:32,512
cette conférence examinera comment concevoir une forme basée sur un modèle.

48
00:03:32,512 --> 00:03:37,164
En particulier, nous allons également examiner comment la liaison de données bidirectionnelle avec

49
00:03:37,164 --> 00:03:41,986
Angular prend en charge, en utilisant la directive ngModel peut être exploitée pour

50
00:03:41,986 --> 00:03:44,894
lier les informations de votre formulaire à

51
00:03:44,894 --> 00:03:50,430
certaines variables JavaScript que vous avez déclarées dans vos classes.

52
00:03:50,430 --> 00:03:53,610
Dans l'exercice qui suit immédiatement cette conférence,

53
00:03:53,610 --> 00:03:56,960
nous examinons comment concevoir une forme basée sur un modèle.

54
00:03:56,960 --> 00:04:01,350
En particulier, nous allons examiner comment la liaison de données bidirectionnelle que Angular prend en charge en utilisant

55
00:04:01,350 --> 00:04:06,280
la directive ngModel peut être utilisée pour lier les informations de

56
00:04:06,280 --> 00:04:10,870
votre formulaire à certaines variables JavaScript que vous déclarez dans vos classes.

57
00:04:10,870 --> 00:04:14,860
Et c'est là que la banane dans une boîte que nous avons mentionnée plus tôt

58
00:04:14,860 --> 00:04:19,140
avec la directive NgModel vient à notre secours.

59
00:04:19,140 --> 00:04:22,880
Au fur et à mesure que nous traversons les exercices, cela deviendra encore plus clair.

60
00:04:22,880 --> 00:04:27,139
Maintenant, apprenons comment tirer parti du support Angular pour les formulaires basés sur un modèle

61
00:04:27,139 --> 00:04:32,585
afin de concevoir nos formulaires dans les exercices.

62
00:04:32,585 --> 00:04:36,014
[MUSIQUE]