1
00:00:04,070 --> 00:00:10,290
Nous venons de terminer l'apprentissage sur les formes guidées par modèle angulaire et aussi,

2
00:00:10,290 --> 00:00:14,300
dans l'exercice, construit notre première forme pilotée par modèle.

3
00:00:14,300 --> 00:00:18,210
Maintenant, lorsque l'utilisateur saisit des informations dans les champs de formulaire,

4
00:00:18,210 --> 00:00:23,655
, nous pouvons souhaiter valider les données que l'utilisateur saisit dans ces champs de données.

5
00:00:23,655 --> 00:00:25,630
Dans les premiers jours du web,

6
00:00:25,630 --> 00:00:28,950
la seule façon de vérifier les données était d'expédier les données

7
00:00:28,950 --> 00:00:32,580
sur le serveur, puis de faire les vérifications côté serveur,

8
00:00:32,580 --> 00:00:37,155
, puis d'obtenir le résultat du côté serveur.

9
00:00:37,155 --> 00:00:41,935
Mais de nos jours, avec de puissants frameworks côté client comme Angular,

10
00:00:41,935 --> 00:00:46,580
une grande partie de la validation des données peut facilement être effectuée côté client

11
00:00:46,580 --> 00:00:52,070
lui-même et nous pouvons facilement attraper beaucoup d'erreurs côté client,

12
00:00:52,070 --> 00:00:56,885
et ensuite fournir une indication à l'utilisateur sur les erreurs.

13
00:00:56,885 --> 00:01:00,170
Maintenant, c'est là que nous allons regarder le support angulaire pour la validation de formulaire

14
00:01:00,170 --> 00:01:03,725
et ensuite comment nous pouvons effectuer la validation de formulaire,

15
00:01:03,725 --> 00:01:11,170
et ensuite afficher des messages d'erreur à l'utilisateur dans les vues.

16
00:01:11,260 --> 00:01:17,455
HTML5 est déjà livré avec un support intégré pour la validation de formulaire.

17
00:01:17,455 --> 00:01:20,750
Mais quand nous utilisons Angular pour notre application,

18
00:01:20,750 --> 00:01:23,840
nous devons d'abord désactiver la validation du formulaire HTML5,

19
00:01:23,840 --> 00:01:25,640
afin que la responsabilité de faire la validation du formulaire

20
00:01:25,640 --> 00:01:29,750
soit transférée à l'application Angular.

21
00:01:29,750 --> 00:01:32,240
Donc, pour le faire pour le formulaire,

22
00:01:32,240 --> 00:01:34,525
comme nous l'avons vu dans l'exercice plus tôt,

23
00:01:34,525 --> 00:01:40,760
nous incluons l'attribut novalidate à la balise form,

24
00:01:40,760 --> 00:01:43,910
de sorte que cela garantit que l'angulaire

25
00:01:43,910 --> 00:01:47,585
assume la responsabilité de faire la validation du formulaire.

26
00:01:47,585 --> 00:01:50,645
Comment Angular nous aide-t-il à faire la validation du formulaire ?

27
00:01:50,645 --> 00:01:55,324
C'est ce que nous allons examiner plus en détail ensuite.

28
00:01:55,324 --> 00:01:59,600
Chaque fois que vous avez besoin de faire la validation de formulaire dans Angular,

29
00:01:59,600 --> 00:02:05,570
surtout lorsque vous avez besoin de faire référence aux champs de formulaire dans votre modèle,

30
00:02:05,570 --> 00:02:09,960
alors vous avez besoin de l'aide des variables de référence de modèle angulaire.

31
00:02:09,960 --> 00:02:12,725
Comment spécifier une variable de référence de modèle ?

32
00:02:12,725 --> 00:02:15,485
La variable de référence de modèle peut être spécifiée pour

33
00:02:15,485 --> 00:02:19,235
n'importe quel élément en associant une variable de modèle comme celle-ci.

34
00:02:19,235 --> 00:02:22,880
Par exemple, dans ce cas pour le formulaire,

35
00:02:22,880 --> 00:02:29,760
, nous spécifions le formulaire de connexion égal à ngForm.

36
00:02:29,760 --> 00:02:33,160
De même, pour un champ de saisie par exemple,

37
00:02:33,160 --> 00:02:35,050
vous direz barre oblique,

38
00:02:35,050 --> 00:02:39,725
ou plutôt #username est égal à ngModel.

39
00:02:39,725 --> 00:02:46,130
Dans ce cas, le formulaire de connexion et le nom d'utilisateur sont toutes des variables de référence de modèle.

40
00:02:46,130 --> 00:02:49,370
Ces variables de référence de modèle peuvent ensuite être utilisées dans

41
00:02:49,370 --> 00:02:53,800
notre modèle angulaire pour faire référence à ces champs.

42
00:02:53,800 --> 00:02:56,245
Donc, dans le modèle lui-même,

43
00:02:56,245 --> 00:02:59,060
vous pouvez vérifier les états de contrôle pour

44
00:02:59,060 --> 00:03:03,289
ces champs, y compris des choses comme si le champ est valide,

45
00:03:03,289 --> 00:03:04,760
s'il est sale,

46
00:03:04,760 --> 00:03:06,430
ou s'il a quelques erreurs.

47
00:03:06,430 --> 00:03:12,865
Nous allons tirer parti de ce support fourni par Angular afin de faire la validation du formulaire.

48
00:03:12,865 --> 00:03:15,964
Comme je l'ai mentionné, nous allons tirer parti de

49
00:03:15,964 --> 00:03:21,870
les variables de référence du modèle pour recueillir l'état du contrôle pour vérifier les informations.

50
00:03:21,870 --> 00:03:27,370
Ainsi, par exemple, vous pouvez dire nomutilisateur.pristine dans votre modèle.

51
00:03:27,370 --> 00:03:30,440
Donc, cela se réfère à la vérification de l'état,

52
00:03:30,440 --> 00:03:33,960
si le contrôle particulier est dans l'état intact,

53
00:03:33,960 --> 00:03:39,080
ce qui signifie qu'il n'a pas été touché et modifié par l'utilisateur jusqu'à présent.

54
00:03:39,080 --> 00:03:41,840
Le sale est opposé de vierge,

55
00:03:41,840 --> 00:03:45,050
ce qui signifie que lorsqu'un champ est sale,

56
00:03:45,050 --> 00:03:49,105
alors cela signifie que le champ a été modifié par l'utilisateur dans le passé.

57
00:03:49,105 --> 00:03:53,090
De même, l'état de contrôle valide et non valide

58
00:03:53,090 --> 00:03:58,295
nous permet de vérifier si les informations contenues dans ce champ sont valides ou non valides,

59
00:03:58,295 --> 00:04:02,360
selon la spécification de votre chèque

60
00:04:02,360 --> 00:04:06,530
pour la validité ou l'état non valide de ce champ particulier.

61
00:04:06,530 --> 00:04:11,990
Ainsi, par exemple, vous pouvez vérifier si vous avez déclaré un champ comme requis,

62
00:04:11,990 --> 00:04:14,930
, ce qui signifie que vous attendiez à ce que l'utilisateur

63
00:04:14,930 --> 00:04:18,790
saisit au moins quelques informations dans le champ.

64
00:04:18,790 --> 00:04:24,280
L'absence d'informations dans le champ de votre formulaire signifie que le champ n'est pas valide.

65
00:04:24,280 --> 00:04:28,670
De même, vous pouvez spécifier la longueur continentale ou la longueur maximale d'une valeur de champ,

66
00:04:28,670 --> 00:04:31,970
afin que vous puissiez facilement vérifier si le nombre de caractères

67
00:04:31,970 --> 00:04:35,500
dans un champ correspond à la longueur principale,

68
00:04:35,500 --> 00:04:37,660
ou inférieur à la longueur maximale, etc.

69
00:04:37,660 --> 00:04:39,380
Dans l'exercice qui suit,

70
00:04:39,380 --> 00:04:42,740
, nous appliquerons ces différentes approches de validation de formulaire pour

71
00:04:42,740 --> 00:04:47,080
notre formulaire basé sur un modèle que nous avons conçu dans l'exercice précédent.

72
00:04:47,080 --> 00:04:51,564
Par exemple, dans votre formulaire,

73
00:04:51,564 --> 00:04:54,170
, vous pouvez désactiver le bouton d'envoi en vérifiant à

74
00:04:54,170 --> 00:04:56,770
si ce formulaire est dans l'état valide ou non.

75
00:04:56,770 --> 00:05:00,650
Donc, dans ce cas, vous associerez le

76
00:05:00,650 --> 00:05:05,875
désactivé et le définissez égal au formulaire de connexion .form.invalid,

77
00:05:05,875 --> 00:05:07,970
signifie que lorsque le formulaire n'est pas valide,

78
00:05:07,970 --> 00:05:10,480
ce bouton sera désactivé dans ce cas.

79
00:05:10,480 --> 00:05:15,910
Ainsi, l'utilisateur ne sera pas autorisé à soumettre les informations via ce formulaire particulier.

80
00:05:15,910 --> 00:05:18,995
Donc, c'est une façon de s'assurer que

81
00:05:18,995 --> 00:05:22,700
entrées incorrectes ne seront pas soumises par l'utilisateur via le formulaire.

82
00:05:22,700 --> 00:05:25,100
De même, pour des champs spécifiques,

83
00:05:25,100 --> 00:05:30,080
, vous pouvez vérifier si le champ a été rempli ou non.

84
00:05:30,080 --> 00:05:33,125
Donc, si vous spécifiez qu'un champ particulier est requis

85
00:05:33,125 --> 00:05:36,620
en spécifiant l'attribut requis pour le champ d'entrée,

86
00:05:36,620 --> 00:05:39,320
alors vous pouvez vérifier s'il y a une erreur de

87
00:05:39,320 --> 00:05:43,250
le type requis soulevé pour l'élément de champ particulier.

88
00:05:43,250 --> 00:05:45,020
Ainsi, dans votre code par exemple,

89
00:05:45,020 --> 00:05:47,390
vous pouvez même spécifier pour informer l'utilisateur de

90
00:05:47,390 --> 00:05:51,035
le fait qu'un champ particulier est incorrect.

91
00:05:51,035 --> 00:05:56,885
Vous utilisez l'erreur mat-pour le signifier.

92
00:05:56,885 --> 00:06:01,230
Donc, la balise mat-error, qui vient de,

93
00:06:01,230 --> 00:06:06,555
encore, le support de forme matérielle angulaire comme vous le voyez ici,

94
00:06:06,555 --> 00:06:09,195
si le nGif s'avère être vrai,

95
00:06:09,195 --> 00:06:15,560
alors ce message sera affiché ci-dessous dans le champ de saisie là,

96
00:06:15,560 --> 00:06:17,100
et similaire au champ de saisie,

97
00:06:17,100 --> 00:06:20,405
sera marqué comme rouge à l'écran.

98
00:06:20,405 --> 00:06:25,085
Donc, c'est quelque chose que vous allez vérifier et

99
00:06:25,085 --> 00:06:30,000
assurer et aussi livrer des messages d'erreur à l'utilisateur.

100
00:06:30,000 --> 00:06:31,740
Dans l'exercice qui suit,

101
00:06:31,740 --> 00:06:35,980
nous appliquerons cette approche pour vérifier le nom d'utilisateur et le mot de passe.

102
00:06:35,980 --> 00:06:40,700
Nous allons spécifier que ces champs sont obligatoires et si l'utilisateur ne

103
00:06:40,700 --> 00:06:45,565
pas entrer d'informations dans ces champs après que le champ a été touché,

104
00:06:45,565 --> 00:06:51,210
alors nous veillerons à ce que le message d'erreur approprié soit affiché à l'utilisateur.

105
00:06:51,210 --> 00:06:57,469
Donc, avec cette compréhension rapide de la validation de formulaire dans Angular,

106
00:06:57,469 --> 00:06:58,970
passons à l'exercice,

107
00:06:58,970 --> 00:07:03,410
où nous allons vérifier comment nous pouvons faire simple validation de formulaire pour

108
00:07:03,410 --> 00:07:08,160
notre formulaire de connexion et ensuite être en mesure d'afficher des messages d'erreur.

109
00:07:08,160 --> 00:07:12,470
Nous reviendrons à la validation de formulaire dans l'un des exercices ultérieurs,

110
00:07:12,470 --> 00:07:19,660
après avoir appris plus sur le support réactif dans Angular.