1
00:00:02,190 --> 00:00:08,100
So we had a look at lode ash which is a vanilla javascript package where we needed to install some translations

2
00:00:08,420 --> 00:00:15,240
and we had a look at class transformer which is also working in Manila javascript but also works particularly

3
00:00:15,240 --> 00:00:17,670
well in typescript.

4
00:00:17,670 --> 00:00:20,390
Now let's have a look at class validator.

5
00:00:20,400 --> 00:00:28,170
This now is a package which really utilizes typescript it builds up on the concept of typescript decorators

6
00:00:28,530 --> 00:00:34,340
and it gives us a brand new way of working with them or at least almost brand new.

7
00:00:34,410 --> 00:00:40,500
If you followed through my decorator module in this course you will actually see something here in this

8
00:00:40,500 --> 00:00:44,220
lecture which we kind of built on our own there as well.

9
00:00:44,220 --> 00:00:49,370
Now however with this third party library we don't have to reinvent the wheel from scratch.

10
00:00:49,380 --> 00:00:55,110
We don't have to build it on our own and does library also arguably is a bit more elaborate than our

11
00:00:55,110 --> 00:00:57,710
solution in the decorators module.

12
00:00:57,900 --> 00:01:00,400
I am talking about validation.

13
00:01:00,540 --> 00:01:06,840
This is a package which allows us to add validation rules with the help of some decorators inside of

14
00:01:06,840 --> 00:01:07,750
a class.

15
00:01:07,890 --> 00:01:13,230
And then whenever we instantiate such a class we can actually validated for the rules we set up there

16
00:01:13,230 --> 00:01:15,490
with the help of decorators.

17
00:01:15,570 --> 00:01:18,930
Now to get started we just need to import this package here.

18
00:01:19,020 --> 00:01:23,030
So npm install class dash validator dash dash save.

19
00:01:23,290 --> 00:01:26,170
And thereafter we can start right away.

20
00:01:26,190 --> 00:01:28,260
So let me restart the webpage.

21
00:01:28,260 --> 00:01:34,740
Def server and to use this package we have to add a couple of decorators to the models so to the classes

22
00:01:35,220 --> 00:01:37,550
where we want to validate certain properties.

23
00:01:37,560 --> 00:01:43,340
So in my case here in the product model I will import something from class validator.

24
00:01:43,370 --> 00:01:49,200
Now again if you followed through the decorator module in this course this is a concept which are already

25
00:01:49,200 --> 00:01:52,680
also built from scratch there without this package.

26
00:01:52,890 --> 00:01:57,200
But of course we built it in a very naive and basic version with this package.

27
00:01:57,210 --> 00:02:01,250
We don't have to build it on our own and it's all the more elaborate.

28
00:02:01,260 --> 00:02:11,320
Now from class validator we can import certain decorators for example is not empty or also is no.

29
00:02:11,450 --> 00:02:18,980
We can also import is positive now we can add them to the properties we want to validate.

30
00:02:18,980 --> 00:02:24,190
So here for example on the title we can add is not empty as a decorator like this.

31
00:02:24,320 --> 00:02:26,440
And these are all decorator factories.

32
00:02:26,450 --> 00:02:29,660
So you always have to execute them.

33
00:02:29,810 --> 00:02:37,390
And also here is number and is positive.

34
00:02:37,440 --> 00:02:41,760
Let's execute that now to use decorators here.

35
00:02:41,760 --> 00:02:49,390
You all should go to t is confit Jason File and make sure you turn experimental decorators on they're

36
00:02:49,720 --> 00:02:55,120
there after safety's and now these errors here should all go away.

37
00:02:55,120 --> 00:03:00,850
We also need to restart the deaf server though so that it picks up the new TSA conflict Jason version.

38
00:03:00,880 --> 00:03:04,890
So now we add a d rules D validation rules here.

39
00:03:05,140 --> 00:03:10,510
We're basically saying that title must never be an empty string and the number should be a positive

40
00:03:10,510 --> 00:03:11,860
number.

41
00:03:11,860 --> 00:03:13,990
Now we can create a new product here.

42
00:03:13,990 --> 00:03:22,090
Let's say their new product where we call new product and I pass an empty string for the title and then

43
00:03:22,090 --> 00:03:25,090
minus five of ninety nine for the number.

44
00:03:25,270 --> 00:03:33,160
If I then console lock new prot Get in formation and execute this.

45
00:03:33,160 --> 00:03:34,850
Let's see whether it works.

46
00:03:34,850 --> 00:03:38,520
Play it safe that huh.

47
00:03:38,530 --> 00:03:43,960
It works well we're not entirely there yet with our decorators.

48
00:03:43,960 --> 00:03:49,630
We set up the the rules but these decorators on their own don't do much.

49
00:03:49,630 --> 00:03:56,230
Instead we now also have to import the validated method from class validator.

50
00:03:56,230 --> 00:04:03,220
So from this package we import validate and we have to execute this on a concrete instance of the class

51
00:04:03,250 --> 00:04:05,790
where we added our decorators too.

52
00:04:05,800 --> 00:04:13,990
So in this case here we can run validate and parse the new prod to it and validate will then return

53
00:04:14,710 --> 00:04:22,290
a promise which actually might yield validation errors so we can then add then here if you were in a

54
00:04:22,300 --> 00:04:25,720
async function you could all use a single weight of course.

55
00:04:25,750 --> 00:04:31,730
And here we get back to errors this validate function finds no important.

56
00:04:31,750 --> 00:04:34,970
We always end up and then even if there are errors.

57
00:04:34,990 --> 00:04:38,380
So if there are validation errors we don't get into some catch block.

58
00:04:38,470 --> 00:04:40,940
We always go into the then block.

59
00:04:41,140 --> 00:04:48,880
Now in here we can now check if errors which is an array dot length is greater than zero which means

60
00:04:48,880 --> 00:04:58,540
there are validation errors in this case we can lock validation errors and maybe also output these errors

61
00:04:58,570 --> 00:04:59,260
we found.

62
00:04:59,260 --> 00:05:05,340
So console log errors and otherwise in my case here I will lock the information.

63
00:05:05,350 --> 00:05:09,100
Now of course it depends on the application you're building what you want to do here.

64
00:05:09,160 --> 00:05:14,350
You might want to show an alert to the user in this case here if there are errors you might want to

65
00:05:14,350 --> 00:05:16,960
reset the input whatever you want to do here.

66
00:05:17,050 --> 00:05:25,270
I'll just log something to the console and if we now save that while you see validation errors and then

67
00:05:25,270 --> 00:05:31,420
here and there array of the errors that were found for example the first error is on the pile property

68
00:05:31,930 --> 00:05:39,860
that it should not be empty and the second error is on the price property that it must be a positive

69
00:05:39,860 --> 00:05:41,240
number.

70
00:05:41,240 --> 00:05:49,040
And this is how easily you can add quite powerful validation to your projects with this decorator based

71
00:05:49,040 --> 00:05:54,520
approach related to what we did earlier in the course and the decorators module.

72
00:05:54,530 --> 00:06:00,740
But as I mentioned multiple times more elaborate with a bunch of built in rules and you can learn all

73
00:06:00,740 --> 00:06:06,220
about that of course in the docs of this package and without reinventing the wheel.

74
00:06:06,410 --> 00:06:12,620
So that a class validate or package really is a powerful package you should be aware of if you're building

75
00:06:12,620 --> 00:06:14,570
bigger projects with typescript.