1
00:00:03,550 --> 00:00:08,265
Avec une brève compréhension des formes réactives angulaires,

2
00:00:08,265 --> 00:00:10,670
passons à l'exercice suivant.

3
00:00:10,670 --> 00:00:12,800
Dans cet exercice, nous allons construire

4
00:00:12,800 --> 00:00:18,705
une forme réactive angulaire dans l'application angulaire sur laquelle nous avons travaillé jusqu'à présent.

5
00:00:18,705 --> 00:00:25,480
En chemin, nous consoliderons notre compréhension des formes angulaires réactives.

6
00:00:25,480 --> 00:00:28,435
Pour commencer l'exercice,

7
00:00:28,435 --> 00:00:31,560
la toute première étape que nous devons faire est d'importer

8
00:00:31,560 --> 00:00:35,860
le module Angular Reactive Forms dans notre module d'application.

9
00:00:35,860 --> 00:00:38,020
Alors, passons au module app,

10
00:00:38,020 --> 00:00:42,160
et nous voyons que nous avions déjà importé le module forms plus tôt.

11
00:00:42,160 --> 00:00:46,540
Nous allons également importer le module Angular Reactive Forms.

12
00:00:46,540 --> 00:00:49,145
Donc, je vais copier ça, coller ça ici,

13
00:00:49,145 --> 00:00:53,810
et ensuite le changer dans le module Angular Reactive Forms.

14
00:00:53,810 --> 00:00:57,770
Après cela, nous devons aussi l'inclure dans notre décorateur.

15
00:00:57,770 --> 00:01:00,440
Donc, en allant au décorateur ici,

16
00:01:00,440 --> 00:01:05,235
Je vais importer le module Reactive forms dans le décorateur.

17
00:01:05,235 --> 00:01:09,365
Deux autres modules que nous devons importer pour

18
00:01:09,365 --> 00:01:14,245
notre formulaire est le MatSelectModule et le MatSlideToggeModule.

19
00:01:14,245 --> 00:01:19,035
Le module select nous permet d'utiliser l'élément select,

20
00:01:19,035 --> 00:01:24,360
et le slideToggle nous permet d'utiliser le toggle à glissière dans notre formulaire.

21
00:01:24,360 --> 00:01:26,750
Donc, pour ce faire, nous allons taper

22
00:01:26,750 --> 00:01:35,670
import MatSelectModule à partir de angulaire/material/select,

23
00:01:36,890 --> 00:01:45,220
et importer MatSlideTogleModule à partir de angulaire/material/slide-toggle,

24
00:01:47,110 --> 00:01:55,195
et ensuite nous devons les ajouter à notre décorateur ngModel dans les importations.

25
00:01:55,195 --> 00:01:57,145
Donc, en descendant là-bas,

26
00:01:57,145 --> 00:02:02,840
laissez-moi importer le MatSelectModule et MatSlideToggeModule là-dedans.

27
00:02:02,840 --> 00:02:04,685
Donc, avec ces changements,

28
00:02:04,685 --> 00:02:08,240
notre module app est maintenant prêt à nous permettre de

29
00:02:08,240 --> 00:02:13,465
utiliser le module Reactive forms dans notre application.

30
00:02:13,465 --> 00:02:14,920
Dans l'étape suivante,

31
00:02:14,920 --> 00:02:22,105
ce que je vais faire est de créer une classe ici appelée Feedback.

32
00:02:22,105 --> 00:02:28,265
Donc, je vais le créer dans le dossier partagé dans le nom de fichier feedback.ts.

33
00:02:28,265 --> 00:02:34,790
Maintenant, c'est la structure de la classe qui représente

34
00:02:34,790 --> 00:02:38,210
le modèle de données correspondant au modèle de formulaire que nous allons utiliser

35
00:02:38,210 --> 00:02:41,840
dans notre application Angular.

36
00:02:41,840 --> 00:02:50,620
Donc, je crée la classe nommée feedback.

37
00:02:51,210 --> 00:02:53,500
Dans la classe Feedback,

38
00:02:53,500 --> 00:02:57,160
Je vais inclure quelques propriétés ;

39
00:02:57,970 --> 00:03:02,830
prénom, nom,

40
00:03:02,830 --> 00:03:10,730
puis numéro de téléphone, Telnum, email,

41
00:03:10,730 --> 00:03:20,440
alors je suis d'accord qui est une variable booléenne,

42
00:03:20,440 --> 00:03:28,385
propriété booléenne, contacttype qui est de la chaîne de type.

43
00:03:28,385 --> 00:03:31,730
Il deviendra plus clair pour vous pourquoi j'inclut tous ces

44
00:03:31,730 --> 00:03:36,145
quand nous regardons la conception du formulaire lui-même.

45
00:03:36,145 --> 00:03:42,350
Cette classe de commentaires correspond aux commentaires que

46
00:03:42,350 --> 00:03:48,045
un utilisateur peut soumettre sur notre restaurant dans notre application Angular.

47
00:03:48,045 --> 00:03:51,800
Donc, c'est la raison pour laquelle je crée cette classe Feedback.

48
00:03:51,800 --> 00:03:55,865
Nous allons mapper cela dans le modèle de formulaire dans

49
00:03:55,865 --> 00:04:00,650
l'un des composants là-bas et aussi avec cela,

50
00:04:00,650 --> 00:04:05,920
je vais exporter une constante qui est un tableau de chaînes appelé

51
00:04:05,920 --> 00:04:12,380
contacttype qui, comme je l'ai mentionné, est un tableau de chaînes contenant trois chaînes ici,

52
00:04:12,380 --> 00:04:29,460
none, Tel et email.

53
00:04:29,750 --> 00:04:34,875
Donc, maintenant notre structure de modèle de données est prête.

54
00:04:34,875 --> 00:04:39,019
Donc, plus tard, lorsque nous développerons notre côté serveur,

55
00:04:39,019 --> 00:04:45,555
, nous serons en mesure de mapper cela dans une donnée que nous stockons sur le côté serveur.

56
00:04:45,555 --> 00:04:47,690
Donc, dans notre application Angular,

57
00:04:47,690 --> 00:04:53,705
cela forme le modèle de données que nous allons utiliser pour notre application tout comme le plat,

58
00:04:53,705 --> 00:04:58,850
le leader, et la promotion que nous avons développée c'est une autre classe qui

59
00:04:58,850 --> 00:05:04,375
nous permet de regrouper un ensemble de propriétés dans une classe ici.

60
00:05:04,375 --> 00:05:06,380
Donc, une fois que nous avons terminé cela,

61
00:05:06,380 --> 00:05:10,365
continuons à créer le formulaire réactif.

62
00:05:10,365 --> 00:05:16,095
Nous allons créer le formulaire réactif dans notre composant contact.

63
00:05:16,095 --> 00:05:20,780
Alors, allons au fichier de contact component.ts,

64
00:05:20,780 --> 00:05:22,520
et nous allons également inclure

65
00:05:22,520 --> 00:05:26,400
le formulaire correspondant dans le fichier de modèle de composants de contact.

66
00:05:26,400 --> 00:05:29,475
Donc, dans le fichier de script de type des composants de contact,

67
00:05:29,475 --> 00:05:32,135
donc c'est là que nous allons préparer notre formulaire

68
00:05:32,135 --> 00:05:35,555
car nous avons vu que le formulaire réactif est construit principalement

69
00:05:35,555 --> 00:05:43,265
dans le code et ensuite mappé dans les éléments de formulaire dans le fichier de modèle.

70
00:05:43,265 --> 00:05:49,360
Donc, ici je vais importer quelques classes.

71
00:05:49,360 --> 00:05:52,655
Je vais importer le FormBuilder,

72
00:05:52,655 --> 00:06:00,055
puis FormBuilder, et les validateurs.

73
00:06:00,055 --> 00:06:05,890
Validators seraient utilisés pour la validation du formulaire qui sera dans le prochain exercice,

74
00:06:05,890 --> 00:06:10,125
mais je vais les importer pour le moment déjà.

75
00:06:10,125 --> 00:06:15,735
Ces fichiers sont importés à partir de la bibliothèque de formulaires angulaires.

76
00:06:15,735 --> 00:06:19,300
Donc, une fois que nous importons ceci,

77
00:06:19,300 --> 00:06:29,790
, nous importerons la classe Feedback et la constante de type de contact

78
00:06:29,790 --> 00:06:38,360
à partir du fichier partagé/feedback

79
00:06:38,360 --> 00:06:41,415
que nous venons de créer à l'étape précédente.

80
00:06:41,415 --> 00:06:44,850
Nous en avons besoin dans notre application.

81
00:06:44,850 --> 00:06:49,455
Maintenant, à l'intérieur de ma classe ici,

82
00:06:49,455 --> 00:07:00,310
, je vais déclarer quelques variables appelées feedbackForm qui est du type FormGroup.

83
00:07:00,410 --> 00:07:07,475
C'est le modèle de formulaire qui va héberger

84
00:07:07,475 --> 00:07:11,960
le formulaire réactif ici et puis je vais aussi déclarer un feedback variable du type Feedback,

85
00:07:11,960 --> 00:07:19,745
donc ce serait le modèle de données correspondant.

86
00:07:19,745 --> 00:07:27,930
Plus tard, cette valeur Feedback peut être récupérée à partir d'un serveur dans notre application,

87
00:07:27,930 --> 00:07:34,205
et ensuite aussi je vais déclarer le contacttype comme une variable

88
00:07:34,205 --> 00:07:41,045
qui est du tableau de chaînes contacttype.

89
00:07:41,045 --> 00:07:44,860
Parce que je dois en faire usage dans notre application.

90
00:07:44,860 --> 00:07:48,675
Pour construire le formulaire réactif dans le constructeur,

91
00:07:48,675 --> 00:07:58,605
j'injecterais le FormBuilder dans le constructeur ici,

92
00:07:58,605 --> 00:08:03,605
et je créerais une méthode distincte appelée

93
00:08:03,605 --> 00:08:08,950
CreateForm que j'invoquerai dans le constructeur,

94
00:08:08,950 --> 00:08:12,300
donc lorsque cette classe est construite, le formulaire sera créé.

95
00:08:12,300 --> 00:08:17,870
Donc, le CreateForm sera une méthode dans laquelle je vais créer le formulaire réel.

96
00:08:17,870 --> 00:08:24,060
Alors, permettez-moi d'ajouter la méthode CreateForm ici.

97
00:08:24,060 --> 00:08:27,590
C'est juste la commodité que j'aurais pu simplement

98
00:08:27,590 --> 00:08:31,250
inclure le code directement dans le constructeur lui-même,

99
00:08:31,250 --> 00:08:34,760
mais vous verrez qu'il pourrait y avoir des raisons pour lesquelles vous

100
00:08:34,760 --> 00:08:41,060
pourrait avoir besoin d'appeler ce CreateForm à partir d'autres endroits.

101
00:08:41,060 --> 00:08:47,240
Donc, il est préférable de le mettre dans une méthode distincte ici.

102
00:08:47,240 --> 00:08:50,830
Donc, je vais créer le formulaire ici, formulaire réactif,

103
00:08:50,830 --> 00:08:56,775
, puis le mettre dans la variable feedbackForm que j'ai déclarée plus tôt.

104
00:08:56,775 --> 00:08:58,335
Donc, pour créer le formulaire,

105
00:08:58,335 --> 00:09:02,215
je vais prendre l'aide du FormBuilder,

106
00:09:02,215 --> 00:09:05,145
le FB que j'ai déclaré chez le constructeur,

107
00:09:05,145 --> 00:09:16,910
et ensuite le FB fournit une méthode appelée Group qui me permet de définir un groupe, un FormGroup ici.

108
00:09:16,910 --> 00:09:23,040
Donc, à l'intérieur, maintenant je vais construire les parties de la forme là-bas.

109
00:09:23,040 --> 00:09:24,845
Donc, dans ce groupe,

110
00:09:24,845 --> 00:09:28,775
maintenant je peux inclure les différents contrôles de formulaire là-bas.

111
00:09:28,775 --> 00:09:34,050
Donc, je mettrais d'abord le prénom,

112
00:09:34,050 --> 00:09:44,200
puis le nom de famille.

113
00:09:45,910 --> 00:09:51,175
Notez comment les champs de mon formulaire sont

114
00:09:51,175 --> 00:09:56,460
reflétant étroitement les champs de ma classe de commentaires.

115
00:09:56,460 --> 00:09:59,790
Ils n'ont pas à correspondre exactement, mais s'ils correspondent,

116
00:09:59,790 --> 00:10:01,630
alors transférer les données entre

117
00:10:01,630 --> 00:10:06,550
le modèle de données et les quatre modèles devient beaucoup plus simple.

118
00:10:06,550 --> 00:10:12,500
Telnum que je vais laisser parce que uh-

119
00:10:13,040 --> 00:10:15,800
J'ai ajouté prénom, nom,

120
00:10:15,800 --> 00:10:25,140
Telnum, email, et d'accord, et type de contact,

121
00:10:25,550 --> 00:10:31,360
que je vais définir comme aucun pour commencer.

122
00:10:31,360 --> 00:10:35,710
Rappelez-vous que le type de contact est un tableau de chaînes contenant trois d'entre eux

123
00:10:35,710 --> 00:10:40,015
, vous devez donc choisir l'un d'eux, puis le mapper dans cette propriété ici.

124
00:10:40,015 --> 00:10:44,920
Donc, je vais choisir ceci comme aucun et ensuite message,

125
00:10:44,920 --> 00:10:49,120
qui sera le retour que l'utilisateur donne à propos de

126
00:10:49,120 --> 00:10:53,605
notre restaurant mappé dans une chaîne ici.

127
00:10:53,605 --> 00:10:59,765
Donc, ce sont les différents champs qui feront partie de notre formulaire ici.

128
00:10:59,765 --> 00:11:04,370
Donc, une fois que nous avons la structure du formulaire en place ici,

129
00:11:04,370 --> 00:11:07,525
donc vous remarquez que lorsque cette méthode est appelée,

130
00:11:07,525 --> 00:11:12,455
cette forme sera la forme réactive sera créée dans le code ici.

131
00:11:12,455 --> 00:11:16,595
Maintenant, nous devons mapper cela dans la vue,

132
00:11:16,595 --> 00:11:17,900
dans le modèle là-bas.

133
00:11:17,900 --> 00:11:21,470
Donc, nous allons le faire dans la prochaine étape.

134
00:11:21,470 --> 00:11:26,130
Donc, maintenant, en allant à notre fichier de modèle,

135
00:11:26,130 --> 00:11:31,415
dans le fichier de modèle de composant de contact,

136
00:11:31,415 --> 00:11:36,159
nous allons faire défiler vers le bas et ensuite l'inclure dans

137
00:11:36,159 --> 00:11:42,910
notre fichier de modèle juste après cette div ici,

138
00:11:42,910 --> 00:11:50,325
donc nous avons cette div dans notre vue de contact qui contient les informations de localisation et ainsi de suite.

139
00:11:50,325 --> 00:11:54,510
Juste après cela, je vais créer un autre div à l'intérieur

140
00:11:54,510 --> 00:11:59,820
que nous allons héberger la forme réactive là-bas.

141
00:11:59,820 --> 00:12:17,720
Permettez-moi d'appliquer quelques choses de mise en page flex

142
00:12:17,720 --> 00:12:19,100
ici à mon div.

143
00:12:19,100 --> 00:12:22,110
Maintenant, cette taille de formulaire comme vous pouvez le voir devrait être

144
00:12:22,110 --> 00:12:25,905
une classe CSS que je vais créer un peu plus tard.

145
00:12:25,905 --> 00:12:31,540
A l'intérieur de cette div, je vais héberger mon formulaire.

146
00:12:31,540 --> 00:12:36,680
Donc, une fois que j'ai mis ce div dans mon fichier template,

147
00:12:36,680 --> 00:12:40,180
maintenant laissez-moi commencer avec un titre pour cela.

148
00:12:40,180 --> 00:12:47,675
Alors, nous dirons : « Envoyez-nous vos commentaires. »

149
00:12:47,675 --> 00:12:54,250
Donc, vous cherchez les commentaires des visiteurs de votre site.

150
00:12:54,950 --> 00:12:58,050
Nous allons commencer à construire le formulaire.

151
00:12:58,050 --> 00:13:03,200
Donc, laissez-moi commencer par la balise de formulaire

152
00:13:03,200 --> 00:13:08,275
ici et ensuite nous allons construire le formulaire à l'intérieur de cette balise de formulaire ici.

153
00:13:08,275 --> 00:13:12,180
Donc, pour le formulaire, la première chose que je vais faire est d'appliquer

154
00:13:12,180 --> 00:13:16,535
la non validation parce que la validation sera prise en charge par angulaire,

155
00:13:16,535 --> 00:13:21,380
et ensuite appliquer un groupe de formulaire ici.

156
00:13:21,380 --> 00:13:38,060
Donc, remarquez que ce groupe de formulaires est celui qui va me lier dans le modèle de formulaire réactif

157
00:13:38,060 --> 00:13:40,555
que j'ai créé dans mon code ici.

158
00:13:40,555 --> 00:13:42,380
Donc, en faisant cela,

159
00:13:42,380 --> 00:13:47,255
nous attachons dans cette forme réactive dans le modèle à

160
00:13:47,255 --> 00:13:53,680
le modèle de formulaire correspondant dans notre fichier dactylographié là-bas.

161
00:13:53,680 --> 00:13:59,100
Donc, la façon dont nous faisons cela est de déclarer le groupe de formulaire et le formulaire de rétroaction.

162
00:13:59,100 --> 00:14:00,910
Je vais vous montrer comment vous liez

163
00:14:00,910 --> 00:14:04,840
les éléments de formulaire restants à

164
00:14:04,840 --> 00:14:09,315
les propriétés correspondantes dans le modèle de formulaire dans un court laps de temps.

165
00:14:09,315 --> 00:14:11,325
Donc, après avoir fait cela,

166
00:14:11,325 --> 00:14:20,480
mettons nos éléments de formulaire en place à l'intérieur de ce modèle de formulaire.

167
00:14:20,480 --> 00:14:24,490
Donc, je vais déclarer un P ici et puis à l'intérieur, j'utiliserai le mat-form-field ici,

168
00:14:24,490 --> 00:14:28,860
à laquelle j'appliquerai une classe CSS appelée Half-width,

169
00:14:28,860 --> 00:14:39,600
et fermerai ceci.

170
00:14:39,600 --> 00:14:45,195
Donc, cela mettrait mon premier contrôle de formulaire en place ici.

171
00:14:45,195 --> 00:14:55,930
Donc, ici, je vais mettre l'entrée et ensuite appliquer le MatinPut du matériau angulaire ici.

172
00:14:56,930 --> 00:15:03,530
Pour lier ceci dans la propriété à l'intérieur de mon modèle de formulaire,

173
00:15:03,530 --> 00:15:08,630
, je devrais faire FormControlName,

174
00:15:09,980 --> 00:15:14,650
et le premier est le prénom.

175
00:15:14,650 --> 00:15:20,370
Donc, de cette façon, cette entrée est maintenant liée à la propriété de prénom

176
00:15:20,370 --> 00:15:26,015
que j'ai définie dans mon modèle de formulaire que j'ai défini dans le code.

177
00:15:26,015 --> 00:15:29,680
Le prénom, puis je vais définir

178
00:15:29,680 --> 00:15:37,900
l'espace réservé comme prénom.

179
00:15:37,900 --> 00:15:39,970
Donc, comme vous pouvez vous y attendre,

180
00:15:39,970 --> 00:15:43,685
ce champ de saisie va être utilisé pour taper

181
00:15:43,685 --> 00:15:51,215
le prénom de l'utilisateur, tapez texte.

182
00:15:51,215 --> 00:15:56,935
Fait intéressant, vous voyez que nous n'avons plus le modèle ng-ici

183
00:15:56,935 --> 00:16:02,950
ou aucune des variables de modèle et ainsi de suite dans mon formulaire.

184
00:16:02,950 --> 00:16:05,945
Les formes réactives fonctionnent différemment.

185
00:16:05,945 --> 00:16:08,480
Ainsi, comme vous le voyez dans les formulaires réactifs,

186
00:16:08,480 --> 00:16:11,975
vous mappez le groupe de formulaires, puis vous essayez les noms de contrôle de formulaire.

187
00:16:11,975 --> 00:16:16,095
Si vous créez des contrôles de formulaire avec la classe de contrôle de formulaire,

188
00:16:16,095 --> 00:16:20,440
, vous le déclarez comme contrôle de formulaire entre crochets, puis faites correspondre

189
00:16:20,440 --> 00:16:24,910
avec le contrôle de formulaire correspondant que vous créez dans votre type sceptique.

190
00:16:24,910 --> 00:16:28,940
Mais maintenant que nous utilisons le constructeur de formulaire,

191
00:16:28,940 --> 00:16:33,280
Je suis seulement nécessaire de lier dans le groupe de formulaire comme

192
00:16:33,280 --> 00:16:38,605
ceci dans mon formulaire au modèle de formulaire correspondant,

193
00:16:38,605 --> 00:16:39,890
et ensuite le reste d'entre eux,

194
00:16:39,890 --> 00:16:42,690
Je déclare comme nom de contrôle de formulaire et ensuite les faire correspondre à

195
00:16:42,690 --> 00:16:45,085
les propriétés correspondantes dans

196
00:16:45,085 --> 00:16:48,995
le contrôle de formulaire que j'ai dans mon dactylographie de la manière du code.

197
00:16:48,995 --> 00:16:53,950
Donc, cela va créer le champ de prénom là-bas.

198
00:16:53,950 --> 00:16:56,400
Laissez-moi copier ceci.

199
00:16:56,400 --> 00:17:00,150
J'ai besoin d'un nom ici.

200
00:17:00,150 --> 00:17:07,005
Donc, je vais copier ceci et ensuite dire que le nom du contrôle de formulaire est Nom,

201
00:17:07,005 --> 00:17:10,510
et l'espace réservé est Nom,

202
00:17:10,510 --> 00:17:12,550
et du type Texte, ici.

203
00:17:12,550 --> 00:17:18,975
J'avais le prénom,

204
00:17:18,975 --> 00:17:24,970
J'avais le nom de famille et si vous regardez le modèle de contrôle de formulaire,

205
00:17:24,970 --> 00:17:27,400
vous verrez qu'après le prénom et le nom de famille,

206
00:17:27,400 --> 00:17:31,770
J'ai le numéro de téléphone comme suivant,

207
00:17:31,770 --> 00:17:34,325
donc je vais coller ceci ici.

208
00:17:34,325 --> 00:17:38,390
Ensuite, le nom de contrôle de formulaire ici est Telnum,

209
00:17:38,390 --> 00:17:46,920
et l'espace réservé est Numéro de téléphone,

210
00:17:46,920 --> 00:17:51,405
et le type est Tel.

211
00:17:51,405 --> 00:17:53,385
Pendant que nous y sommes,

212
00:17:53,385 --> 00:17:59,905
Je vais lier le Requis dans ceux-ci bien que ce n'est pas vraiment nécessaire.

213
00:17:59,905 --> 00:18:08,275
Mais permettez-moi d'ajouter ça là-dedans.

214
00:18:08,275 --> 00:18:11,920
Maintenant, numéro de téléphone alors j'ai email.

215
00:18:11,920 --> 00:18:20,679
Donc, le champ suivant est Email,

216
00:18:25,520 --> 00:18:32,100
et l'espace réservé est Email,

217
00:18:32,100 --> 00:18:35,510
et le type est également.

218
00:18:35,510 --> 00:18:38,600
Donc, maintenant j'ai le prénom,

219
00:18:38,600 --> 00:18:41,610
nom de famille, numéro de téléphone et email.

220
00:18:41,610 --> 00:18:52,820
La prochaine chose que je vais ajouter est un toggle.

221
00:18:53,850 --> 00:18:56,600
Auparavant, nous utilisons la case à cocher.

222
00:18:56,600 --> 00:19:03,240
Le slidetoggle est un autre contrôle de forme que le matériau angulaire fournit,

223
00:19:03,240 --> 00:19:07,150
qui est quelque peu différent de la case à cocher et

224
00:19:07,150 --> 00:19:11,480
j'ai pensé que je vais vous illustrer en l'utilisant dans le formulaire ici.

225
00:19:11,480 --> 00:19:18,680
Maintenant, c'est là que je vais utiliser une table pour positionner ces éléments.

226
00:19:19,890 --> 00:19:22,300
La raison en est que,

227
00:19:22,300 --> 00:19:25,520
ces éléments sont difficiles à positionner sans utiliser de table.

228
00:19:25,520 --> 00:19:27,605
Donc, à l'intérieur de la table,

229
00:19:27,605 --> 00:19:31,740
Je suis sûr que vous savez tous comment utiliser la table,

230
00:19:35,280 --> 00:19:39,740
J'ai essayé de les positionner en utilisant la disposition flexible standard

231
00:19:39,740 --> 00:19:44,970
et n'a pas très réussi avec cela.

232
00:19:44,970 --> 00:19:50,510
Donc, à la place, j'ai eu recours à une table pour positionner ces deux éléments dans mon formulaire.

233
00:19:50,510 --> 00:19:54,350
Donc, mat-slide-bascule.

234
00:19:54,350 --> 00:19:57,680
Donc, le slidetoggle est comme la case à cocher,

235
00:19:57,680 --> 00:20:00,390
vous pouvez l'activer et désactiver,

236
00:20:00,390 --> 00:20:04,550
et cela est autorisé à sélectionner une valeur booléenne ici.

237
00:20:04,550 --> 00:20:14,200
Donc, slidetoggle et le FormControlName est d'accord.

238
00:20:14,200 --> 00:20:16,140
Si vous vous souvenez, nous étions d'accord,

239
00:20:16,140 --> 00:20:22,925
qui était une propriété booléenne dans le contrôle de formulaire.

240
00:20:22,925 --> 00:20:25,735
Alors, pour cela, je dirais,

241
00:20:25,735 --> 00:20:29,340
pouvons-nous vous contacter ?

242
00:20:29,340 --> 00:20:35,140
Maintenant, il vous sera plus clair quand vous verrez la version finale de

243
00:20:35,140 --> 00:20:43,060
ce formulaire pour comprendre pourquoi nous faisons cela.

244
00:20:43,060 --> 00:20:49,895
Maintenant, nous allons juste mettre toutes les parties dans ma forme réactive ici.

245
00:20:49,895 --> 00:20:55,925
La deuxième partie, je vais utiliser un select,

246
00:20:55,925 --> 00:21:03,920
qui est pris en charge par le composant mat-select dans le matériau angulaire.

247
00:21:03,920 --> 00:21:12,460
Donc, MD sélectionnez et pour cela l'espace réservé,

248
00:21:13,520 --> 00:21:21,690
Je vais définir comme « Comment ? »,

249
00:21:21,690 --> 00:21:27,580
et FormControlName avec lesquels je vais lier ceci est

250
00:21:27,580 --> 00:21:37,650
« contacttype » et fermer le MD select.

251
00:21:37,650 --> 00:21:41,720
Donc, cela me permet de créer un élément select dans mon formulaire.

252
00:21:41,720 --> 00:21:44,660
Donc, l'élément select est quelque chose qui me donne

253
00:21:44,660 --> 00:21:48,535
une liste déroulante à partir de laquelle je peux sélectionner l'un d'eux.

254
00:21:48,535 --> 00:21:50,905
Donc, pour créer la liste déroulante,

255
00:21:50,905 --> 00:22:00,510
je vais utiliser l'option mat-qui est disponible en tant que composant dans le matériau angulaire.

256
00:22:00,510 --> 00:22:05,035
Ainsi, l'option mat-est incluse dans le mat-select.

257
00:22:05,035 --> 00:22:06,810
Donc, pour l'option,

258
00:22:06,810 --> 00:22:09,570
Je vais faire *ngFor,

259
00:22:09,570 --> 00:22:17,070
et je suis sûr que vous vous souvenez de la directive ngFor de plus en plus tôt,

260
00:22:17,070 --> 00:22:24,750
*ngFor « Let ctype de contactType. »

261
00:22:24,750 --> 00:22:28,360
Maintenant, vous voyez pourquoi j'ai déclaré la variable de type de contact

262
00:22:28,360 --> 00:22:44,740
dans mon code plus tôt et puis je dirais, [value] = « ctype. »

263
00:22:44,740 --> 00:23:00,840
Donc, je mets en place mon option dans mon select ici et en utilisant l'interpolation,

264
00:23:00,840 --> 00:23:03,040
Je vais taper ctype ici.

265
00:23:03,040 --> 00:23:10,100
Donc, cela me donnera un menu d'option déroulant dans mon formulaire là-bas.

266
00:23:10,100 --> 00:23:14,665
Donc, c'est la partie suivante et enfin,

267
00:23:14,665 --> 00:23:21,270
après la table, je vais mettre dans une zone de texte ici.

268
00:23:21,270 --> 00:23:31,320
Donc, je dirais p et fermerais ce P. Pour coiffer la forme réactive,

269
00:23:31,320 --> 00:23:35,395
l'élément P me permet de positionner correctement les éléments.

270
00:23:35,395 --> 00:23:37,580
Donc, c'est pour ça que je l'utilise.

271
00:23:37,580 --> 00:23:42,380
Donc, comme vous vous en souvenez,

272
00:23:42,540 --> 00:23:48,740
mat-form-field me permet d'inclure un conteneur d'entrée ici et puis à l'intérieur, je vais définir une zone de texte,

273
00:23:48,740 --> 00:23:56,239
que j'applique

274
00:23:56,239 --> 00:24:08,650
la directive MatinPut à cela.

275
00:24:08,650 --> 00:24:15,460
Alors, le FormControlName, je vais donner comme « message ».

276
00:24:15,460 --> 00:24:23,290
Donc, cet élément de formulaire particulier permet à l'utilisateur de taper

277
00:24:23,290 --> 00:24:31,305
dans le message de feedback pour mon restaurant.

278
00:24:31,305 --> 00:24:37,100
Donc, espace réservé « Your Feedback »,

279
00:24:37,100 --> 00:24:42,610
et puis je vais donner à la zone de texte une taille de

280
00:24:42,610 --> 00:24:51,245
12 lignes ici, puis fermer la zone de texte.

281
00:24:51,245 --> 00:24:58,005
Donc, ici, nous avons une zone de texte avec les 12 lignes.

282
00:24:58,005 --> 00:25:03,350
Donc, cela complète la plupart du formulaire.

283
00:25:03,350 --> 00:25:07,910
Désolé, cela devrait être en dehors de la table.

284
00:25:08,070 --> 00:25:11,830
Nous avons besoin d'un bouton pour soumettre le formulaire.

285
00:25:11,830 --> 00:25:20,755
Donc, juste là, j'inclurai un bouton du type="submit » et

286
00:25:20,755 --> 00:25:24,155
ce bouton de soumission, j'appliquerai

287
00:25:24,155 --> 00:25:32,270
le mat-button et appliquerai également la classe ="background-primary ».

288
00:25:33,600 --> 00:25:42,770
Vous m'avez vu appliquer cela au bouton dans l'exercice précédent aussi,

289
00:25:42,770 --> 00:25:45,740
type similaire de bouton.

290
00:25:45,740 --> 00:25:48,510
Alors, maintenant mon formulaire est presque prêt.

291
00:25:48,510 --> 00:25:54,455
Vous pouvez ajouter quelques classes CSS au composant contact.

292
00:25:54,455 --> 00:25:58,725
Les trois classes que j'ai utilisées sont pleine largeur,

293
00:25:58,725 --> 00:26:06,420
ceci est utilisé pour définir la taille des éléments là-bas.

294
00:26:06,420 --> 00:26:10,980
Donc, pleine largeur 95 pour cent, demi-largeur.

295
00:26:11,200 --> 00:26:17,565
Donc, cela me permet de dimensionner les éléments correctement,

296
00:26:17,565 --> 00:26:23,930
45 pour cent demi-largeur, puis form-size.

297
00:26:26,400 --> 00:26:32,740
Donc, j'utilise ces classes CSS dans mon formulaire.

298
00:26:32,740 --> 00:26:38,230
Donc, avec cela, sauvegardons les changements,

299
00:26:38,460 --> 00:26:44,150
et jetez un coup d'œil au formulaire dans notre application.

300
00:26:44,150 --> 00:26:45,915
Aller dans le navigateur,

301
00:26:45,915 --> 00:26:48,725
dans la vue contact,

302
00:26:48,725 --> 00:26:54,210
lorsque vous faites défiler vers le bas, vous voyez maintenant le formulaire en place dans la vue contact ici.

303
00:26:54,210 --> 00:26:57,660
Donc, vous voyez le envoyez-nous vos commentaires,

304
00:26:57,660 --> 00:27:01,985
le prénom, le nom de famille, le numéro de téléphone,

305
00:27:01,985 --> 00:27:06,695
l'email et la diapositive bascule ici,

306
00:27:06,695 --> 00:27:12,395
donc vous voyez la diapositive basculer en place là et puis c'est cette sélection.

307
00:27:12,395 --> 00:27:15,650
Le select me permet de sélectionner l'un de ces trois.

308
00:27:15,650 --> 00:27:20,415
La valeur par défaut est none, puis la zone de texte ici,

309
00:27:20,415 --> 00:27:25,675
me permet de taper mes commentaires ici, puis le bouton de soumission.

310
00:27:25,675 --> 00:27:28,940
Donc, cela complète le formulaire réactif dans

311
00:27:28,940 --> 00:27:32,690
ma demande mais quand vous cliquez sur le bouton Soumettre,

312
00:27:32,690 --> 00:27:35,000
vous ne pourrez pas soumettre ce formulaire.

313
00:27:35,000 --> 00:27:39,480
Donc, nous devons ajouter le ngSubmit à notre formulaire dans le modèle

314
00:27:39,480 --> 00:27:44,485
, puis ajouter une méthode dans notre fichier de script de type.

315
00:27:44,485 --> 00:27:47,185
Aller à notre code,

316
00:27:47,185 --> 00:27:49,315
au formulaire ici,

317
00:27:49,315 --> 00:27:53,830
avec le formulaire novalidate FormGroup,

318
00:27:53,830 --> 00:28:01,670
Je vais ajouter dans un ngSubmit au formulaire.

319
00:28:02,730 --> 00:28:10,025
Je vais appeler la méthode comme méthode onSubmit.

320
00:28:10,025 --> 00:28:14,155
Donc, avec cela, mon formulaire est maintenant prêt à soumettre des informations.

321
00:28:14,155 --> 00:28:17,195
J'ai besoin d'aller dans les composants de contact,

322
00:28:17,195 --> 00:28:25,380
type fichier script, puis créer la méthode onSubmit ici.

323
00:28:25,380 --> 00:28:28,420
Donc, dans la méthode onSubmit,

324
00:28:31,450 --> 00:28:37,030
il se trouve que le modèle de formulaire est exactement le même que les modèles de données,

325
00:28:37,030 --> 00:28:45,790
donc je peux simplement prendre la valeur du modèle de formulaire.

326
00:28:45,790 --> 00:28:49,840
Donc, quand vous avez un modèle de formulaire comme ce formulaire Feedback,

327
00:28:49,840 --> 00:28:54,410
le formulaire de feedback donne une propriété appelée value,

328
00:28:54,410 --> 00:29:00,020
qui me permet de récupérer la valeur actuelle de tout cela à partir de mon formulaire de feedback.

329
00:29:00,020 --> 00:29:03,810
Donc, cela formera un objet JavaScript,

330
00:29:03,810 --> 00:29:06,740
que je peux alors mapper dans l'objet JavaScript de feedback.

331
00:29:06,740 --> 00:29:10,170
Il se trouve que les deux ont exactement la même structure,

332
00:29:10,170 --> 00:29:11,690
le modèle de données et le modèle de formulaire.

333
00:29:11,690 --> 00:29:14,140
Donc, c'est pourquoi je suis capable de charger rapidement la valeur

334
00:29:14,140 --> 00:29:18,120
directement dans le modèle de données lorsque l'utilisateur soumet le formulaire.

335
00:29:18,120 --> 00:29:21,120
Si votre modèle de données est quelque peu différent du modèle de formulaire,

336
00:29:21,120 --> 00:29:24,460
vous devez mapper explicitement dans les propriétés individuelles et

337
00:29:24,460 --> 00:29:28,890
cela peut être fait à l'intérieur de cette méthode.

338
00:29:29,610 --> 00:29:36,455
Juste pour vous montrer que le formulaire est soumis correctement,

339
00:29:36,455 --> 00:29:44,760
Je vais enregistrer la valeur sur la console, la console JavaScript.

340
00:29:44,760 --> 00:29:50,200
Alors je dirais, this.feedbackform.reset.

341
00:29:51,320 --> 00:30:00,405
La méthode reset vous permet de réinitialiser le formulaire à son état normal,

342
00:30:00,405 --> 00:30:03,000
supprimant toutes les entrées que vous avez faites dans le formulaire.

343
00:30:03,000 --> 00:30:05,480
Donc, une fois que l'utilisateur soumet,

344
00:30:05,480 --> 00:30:09,030
vous captureriez normalement les valeurs, puis réinitialisez le formulaire afin

345
00:30:09,030 --> 00:30:14,365
que d'autres entrées peuvent être effectuées sous forme distincte.

346
00:30:14,365 --> 00:30:17,450
C'est donc la méthode de reset que nous allons utiliser ici.

347
00:30:17,450 --> 00:30:19,265
Donc, avec ces changements,

348
00:30:19,265 --> 00:30:23,900
sauvegardons les changements et allons voir notre formulaire en action.

349
00:30:23,900 --> 00:30:30,080
Une dernière petite chose que je veux ajouter à mon modèle est de vous montrer

350
00:30:30,080 --> 00:30:36,200
les valeurs de formulaire à l'intérieur de mon formulaire lui-même,

351
00:30:36,200 --> 00:30:38,230
bien que dans une vraie application,

352
00:30:38,230 --> 00:30:42,580
vous ne feriez pas cela mais je voulais juste vous illustrer comment

353
00:30:42,580 --> 00:30:47,165
vous pouvez voir les valeurs de feedbackForm directement ici,

354
00:30:47,165 --> 00:30:49,095
de la Modèle FeedbackForm.

355
00:30:49,095 --> 00:30:52,395
Donc, je peux le faire ici.

356
00:30:52,395 --> 00:31:02,625
Je peux dire feedbackForm.value et acheminé par json pour montrer ici.

357
00:31:02,625 --> 00:31:08,435
De même, je peux le faire ici, FeedbackForm.

358
00:31:08,435 --> 00:31:15,840
Il y a une autre propriété associée à ce modèle de formulaire appelé status,

359
00:31:15,840 --> 00:31:20,440
qui me montre l'état du formulaire en ce moment,

360
00:31:20,440 --> 00:31:22,265
qu'il soit valide ou non.

361
00:31:22,265 --> 00:31:26,900
Donc, je vais ajouter ces deux-là dans mon formulaire ici,

362
00:31:26,900 --> 00:31:30,285
afin que cela soit montré dans mon modèle.

363
00:31:30,285 --> 00:31:34,670
Ceci est juste pour vous donner une vue instantanée de ce que

364
00:31:34,670 --> 00:31:41,620
le modèle de formulaire contient dans mon fichier de script de type.

365
00:31:42,460 --> 00:31:47,590
Sauvegardons les changements et allons jeter un coup d'œil à notre formulaire.

366
00:31:47,590 --> 00:31:50,325
Pour revenir à notre navigateur,

367
00:31:50,325 --> 00:31:55,630
, vous pouvez maintenant voir que les valeurs de formulaire sont affichées

368
00:31:55,630 --> 00:32:04,460
ici et que le formulaire est en bonne forme pour nous permettre de taper les valeurs.

369
00:32:04,460 --> 00:32:08,660
Alors saisissons quelques valeurs aléatoires ici et vous pouvez

370
00:32:08,660 --> 00:32:14,090
voir immédiatement la valeur est reflétée dans le modèle FeedbackForm là,

371
00:32:14,090 --> 00:32:24,020
juste en haut et email.

372
00:32:26,050 --> 00:32:29,295
Ça n'a pas d'importance, il suffit de taper quelque chose.

373
00:32:29,295 --> 00:32:31,680
Ensuite, ce commutateur à bascule,

374
00:32:31,680 --> 00:32:34,575
vous pouvez voir que lorsque vous l'allumez et éteignez,

375
00:32:34,575 --> 00:32:39,385
le changement d'accord passe de faux à vrai.

376
00:32:39,385 --> 00:32:43,030
Alors laissez-moi le laisser à vrai puis le select.

377
00:32:43,030 --> 00:32:50,640
Laissez-moi sélectionner email et puis vous voyez que le type de contact ici a changé pour email.

378
00:32:50,640 --> 00:32:56,060
Donc, c'est ainsi que vous choisiriez de changer la valeur.

379
00:32:56,060 --> 00:33:00,575
Donc, disons email et puis ici,

380
00:33:00,575 --> 00:33:01,940
, nous pouvons taper le message.

381
00:33:01,940 --> 00:33:05,960
Un texte aléatoire ici et vous seriez

382
00:33:05,960 --> 00:33:10,675
capable de voir que le texte aléatoire est reflété dans le message là-bas.

383
00:33:10,675 --> 00:33:12,690
Soumettons le formulaire.

384
00:33:12,690 --> 00:33:16,680
Donc, lorsque vous cliquez sur le Soumettre vous voyez immédiatement dans la console,

385
00:33:16,680 --> 00:33:20,605
la valeur étant imprimée ici,

386
00:33:20,605 --> 00:33:21,870
dans cet objet ici.

387
00:33:21,870 --> 00:33:27,155
Vous pouvez donc parcourir pour voir toutes les propriétés de cet objet,

388
00:33:27,155 --> 00:33:31,050
le modèle de formulaire de rétroaction.

389
00:33:31,050 --> 00:33:38,210
Donc, ceci est une illustration d'une forme réactive dans notre application.

390
00:33:38,210 --> 00:33:41,850
Ceci termine cet exercice.

391
00:33:41,850 --> 00:33:44,800
Dans cet exercice, nous avons vu comment créer

392
00:33:44,800 --> 00:33:47,910
une forme réactive dans notre application Angular.

393
00:33:47,910 --> 00:33:52,910
C'est aussi un bon point où vous pouvez faire un commit Git avec le message,

394
00:33:52,910 --> 00:33:55,670
réactif forme la première partie.