1
00:00:03,170 --> 00:00:05,820
Bây giờ chúng ta đã tìm hiểu về

2
00:00:05,820 --> 00:00:11,165
hỗ trợ xác nhận mẫu theo hướng mẫu trong Angular trong bài giảng trước đó, chúng ta

3
00:00:11,165 --> 00:00:14,625
hãy áp dụng những gì chúng ta đã học được

4
00:00:14,625 --> 00:00:18,330
vào biểu mẫu đăng nhập mà chúng ta đã thiết kế trong bài tập trước đó.

5
00:00:18,330 --> 00:00:21,395
Chúng tôi sẽ thực hiện xác nhận mẫu đơn giản cho mẫu đăng nhập.

6
00:00:21,395 --> 00:00:26,160
Cụ thể, chúng tôi sẽ chỉ định tên người dùng và mật khẩu theo yêu cầu,

7
00:00:26,160 --> 00:00:32,430
và sau đó kiểm tra để đảm bảo rằng người dùng nhập thông tin vào các trường này

8
00:00:32,430 --> 00:00:37,125
và có thể hiển thị thông báo lỗi khi các trường trống.

9
00:00:37,125 --> 00:00:46,180
Chúng ta hãy tiến hành sửa đổi này cho ứng dụng trong bài tập này.

10
00:00:46,180 --> 00:00:49,215
Để bắt đầu vào bài tập này, chúng

11
00:00:49,215 --> 00:00:53,600
ta hãy đi đến biểu mẫu đăng nhập ở đây,

12
00:00:53,600 --> 00:00:57,090
mà chúng ta có trong mẫu thành phần đăng nhập ở đây.

13
00:00:57,090 --> 00:01:02,400
Chúng tôi đã thêm vào thuộc tính novalidate vào biểu mẫu đăng nhập.

14
00:01:02,400 --> 00:01:10,780
Vì vậy, chúng ta hãy thêm vào biến mẫu được gọi là LogInform để mẫu này,

15
00:01:10,780 --> 00:01:18,835
và sau đó thiết lập này để NGForm như chúng ta đã hiểu từ bài giảng trước đây ở đây.

16
00:01:18,835 --> 00:01:20,170
Vì vậy, bằng cách làm điều này,

17
00:01:20,170 --> 00:01:26,500
chúng tôi đang xác định rằng biến mẫu này cho phép chúng tôi theo dõi trạng thái của biểu mẫu.

18
00:01:26,500 --> 00:01:31,330
Vì vậy, chúng ta thậm chí có thể kiểm tra trạng thái hợp lệ hoặc không hợp lệ cho biểu mẫu này.

19
00:01:31,330 --> 00:01:34,485
Bây giờ, ngoài ra, đối với mỗi đầu vào này,

20
00:01:34,485 --> 00:01:43,620
chúng tôi cũng sẽ tương tự thêm vào các biến mẫu tương ứng ở đây.

21
00:01:43,620 --> 00:01:45,220
Vì vậy, hãy để tôi đi đến dòng tiếp theo ở đây,

22
00:01:45,220 --> 00:01:52,670
và ở đó tôi sẽ nói tên người dùng là NgModel.

23
00:01:52,670 --> 00:01:58,360
Sau đó, chúng tôi cũng sẽ chỉ định điều này theo yêu cầu ở đây.

24
00:01:58,360 --> 00:02:00,660
Tương tự như vậy, đối với mật khẩu,

25
00:02:00,660 --> 00:02:09,545
chúng ta sẽ thêm vào biến mẫu tương ứng ở đây như mật khẩu là trong NGModel,

26
00:02:09,545 --> 00:02:15,700
và sau đó chỉ định điều này theo yêu cầu ở đây.

27
00:02:15,700 --> 00:02:19,700
Vì vậy, bây giờ mà chúng tôi đã xác định các biến mẫu,

28
00:02:19,700 --> 00:02:23,870
sau đó chúng tôi có thể thực hiện một số kiểm tra xác nhận hình thức ở đây.

29
00:02:23,870 --> 00:02:26,490
Bây giờ, bởi vì chúng tôi đang chỉ định điều này theo yêu cầu,

30
00:02:26,490 --> 00:02:28,280
có nghĩa là nếu

31
00:02:28,280 --> 00:02:30,455
các trường này, các trường đầu vào trống,

32
00:02:30,455 --> 00:02:34,525
sau đó lỗi bắt buộc sẽ được gắn cờ cho điều này.

33
00:02:34,525 --> 00:02:40,105
Tương tự như vậy, bây giờ chúng ta có biến mẫu cho biểu mẫu,

34
00:02:40,105 --> 00:02:47,380
chúng ta có thể dễ dàng sử dụng điều đó để kiểm tra và vô hiệu hóa nút Gửi xuống dưới đây.

35
00:02:47,380 --> 00:02:49,255
Vì vậy, đối với nút Gửi,

36
00:02:49,255 --> 00:02:53,270
những gì chúng tôi làm ở đây là sử dụng

37
00:02:53,270 --> 00:03:01,080
trường bị vô hiệu hóa ở đây,

38
00:03:01,080 --> 00:03:03,500
và sau đó chúng tôi sẽ thiết lập trường bị vô hiệu hóa

39
00:03:03,500 --> 00:03:12,270
để Loginform.form.invalid.

40
00:03:12,270 --> 00:03:14,030
Vì vậy, bằng cách làm điều này,

41
00:03:14,030 --> 00:03:18,030
chúng tôi sẽ vô hiệu hóa nút này khi biểu mẫu không hợp lệ.

42
00:03:18,030 --> 00:03:23,925
Vì vậy, do đó, người dùng thậm chí không thể gửi biểu mẫu khi biểu mẫu chứa mục nhập không hợp lệ.

43
00:03:23,925 --> 00:03:27,355
Vì vậy, ví dụ, nếu tên người dùng trống hoặc mật khẩu trống,

44
00:03:27,355 --> 00:03:29,520
thì biểu mẫu đăng nhập sẽ không hợp lệ,

45
00:03:29,520 --> 00:03:32,290
và do đó người dùng không thể gửi biểu mẫu này.

46
00:03:32,290 --> 00:03:36,950
Bây giờ, đây là một phần của xác nhận hình thức mà chúng ta có thể làm,

47
00:03:36,950 --> 00:03:40,385
theo đó chúng ta có thể ngăn chặn các hình thức từ được gửi.

48
00:03:40,385 --> 00:03:43,285
Ngoài ra, đối với mỗi trường này,

49
00:03:43,285 --> 00:03:47,945
chúng tôi thậm chí có thể hiển thị thông báo lỗi để

50
00:03:47,945 --> 00:03:53,875
chỉ ra loại lỗi nào đang xảy ra trong trường cụ thể này.

51
00:03:53,875 --> 00:03:55,309
Vì vậy, để làm điều này,

52
00:03:55,309 --> 00:03:58,230
với mỗi yếu tố trường hình thức,

53
00:03:58,230 --> 00:04:07,650
chúng ta sẽ thêm vào thẻ mat-error ở đó,

54
00:04:07,650 --> 00:04:12,270
và sau đó chúng ta sẽ nói dừng ngIf,

55
00:04:12,270 --> 00:04:18,345
và chúng ta sẽ nói tên người dùng.error.

56
00:04:18,345 --> 00:04:23,920
Vì vậy, lưu ý rằng chúng tôi đã cung cấp cho mẫu này một biến được gọi là username,

57
00:04:23,920 --> 00:04:28,665
để chúng tôi có thể sử dụng trong username.errors nếu có lỗi và

58
00:04:28,665 --> 00:04:34,930
nếu loại lỗi này là cần thiết.

59
00:04:34,930 --> 00:04:41,810
Vì vậy, nếu lỗi là một loại lỗi yêu cầu gây ra

60
00:04:41,810 --> 00:04:44,060
ở đó, sau đó tại thời điểm đó,

61
00:04:44,060 --> 00:04:54,140
chúng ta có thể xác định rằng lỗi tương ứng được hiển thị là tên người dùng là bắt buộc.

62
00:04:54,140 --> 00:04:59,305
Vì vậy, đó là lỗi sẽ được hiển thị cho lĩnh vực này ở đây.

63
00:04:59,305 --> 00:05:03,810
Tương tự như vậy, hãy để tôi thêm cùng một loại điều cho trường mật khẩu ở đây.

64
00:05:03,810 --> 00:05:06,610
Vì vậy, để tôi sao chép nó và sau đó dán nó vào đây,

65
00:05:06,610 --> 00:05:09,110
và sau đó chúng tôi sẽ nói mật khẩu.error.

66
00:05:09,110 --> 00:05:17,395
Sau đó, thông báo sẽ là mật khẩu là bắt buộc.

67
00:05:17,395 --> 00:05:19,070
Vì vậy, bằng cách thêm điều này,

68
00:05:19,070 --> 00:05:22,535
chúng tôi sẽ hiển thị thông báo lỗi xuống dưới

69
00:05:22,535 --> 00:05:27,665
các trường này khi trường không chứa bất kỳ thông tin.

70
00:05:27,665 --> 00:05:29,950
Chỉnh sửa nhỏ ở đây.

71
00:05:29,950 --> 00:05:34,820
Đó là tên người dùng? errors.required ở đây,

72
00:05:34,820 --> 00:05:38,470
và tương tự, điều này cũng nên là.required ở đây.

73
00:05:38,470 --> 00:05:40,375
Vì vậy, với những sửa đổi này,

74
00:05:40,375 --> 00:05:43,280
thành phần đăng nhập của tôi bây giờ đã sẵn sàng

75
00:05:43,280 --> 00:05:47,275
để thực hiện xác nhận biểu mẫu và sau đó hiển thị thông báo lỗi.

76
00:05:47,275 --> 00:05:52,505
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó đi và xem ứng dụng được cập nhật.

77
00:05:52,505 --> 00:05:55,705
Đi đến ứng dụng của chúng tôi trong trình duyệt,

78
00:05:55,705 --> 00:05:58,475
hãy mở biểu mẫu đăng nhập ở đây.

79
00:05:58,475 --> 00:06:01,720
Vì vậy, bạn có thể thấy rằng bây giờ cả tên người dùng và mật khẩu mang

80
00:06:01,720 --> 00:06:05,355
một ngôi sao ở đó để chỉ ra rằng cả hai đều được yêu cầu.

81
00:06:05,355 --> 00:06:07,550
Vậy, hãy để tôi gõ vào.

82
00:06:09,870 --> 00:06:16,130
Vì vậy, ở đây, bạn thấy rằng biểu mẫu là hợp lệ bởi vì nó chứa thông tin,

83
00:06:16,130 --> 00:06:20,375
và do đó nút Đăng nhập sẽ được kích hoạt.

84
00:06:20,375 --> 00:06:24,840
Hãy để tôi loại bỏ các thông tin từ trường mật khẩu,

85
00:06:24,840 --> 00:06:27,950
và sau đó bạn ngay lập tức nhận thấy rằng

86
00:06:27,950 --> 00:06:32,405
lỗi được chỉ ra ở đây cho biết mật khẩu là bắt buộc.

87
00:06:32,405 --> 00:06:37,040
Cũng lưu ý rằng nút Đăng nhập sẽ không được bật nữa.

88
00:06:37,040 --> 00:06:40,760
Nó sẽ bị vô hiệu hóa. Vì vậy, bạn sẽ không thể gửi biểu mẫu ở đây.

89
00:06:40,760 --> 00:06:43,960
Nhưng thời điểm tôi điền vào một cái gì đó vào mật khẩu,

90
00:06:43,960 --> 00:06:47,060
sau đó nút Đăng nhập sẽ được kích hoạt

91
00:06:47,060 --> 00:06:49,670
và chúng tôi sẽ có thể gửi biểu mẫu ở đây.

92
00:06:49,670 --> 00:06:51,390
Tương tự như vậy cho tên người dùng.

93
00:06:51,390 --> 00:06:55,045
Nếu tôi xóa thông tin tên người dùng ở

94
00:06:55,045 --> 00:06:58,115
đó, sau đó bạn sẽ thấy lỗi đang được hiển thị ở đây,

95
00:06:58,115 --> 00:07:04,670
và bạn cũng sẽ thấy rằng nút Đăng nhập không được kích hoạt tại thời điểm này.

96
00:07:04,670 --> 00:07:10,270
Vì vậy, đó là cách xác nhận biểu mẫu có thể được thực hiện trong trường hợp này.

97
00:07:10,270 --> 00:07:12,170
Vì vậy, như bạn đã thấy,

98
00:07:12,170 --> 00:07:15,960
bằng cách thêm vào xác nhận hình thức đơn giản vào ứng dụng của

99
00:07:15,960 --> 00:07:18,515
chúng tôi, chúng tôi có thể kiểm tra để đảm bảo

100
00:07:18,515 --> 00:07:22,925
rằng các trường chứa thông tin mà họ đang giả sử để chứa,

101
00:07:22,925 --> 00:07:24,725
và ở định dạng phù hợp.

102
00:07:24,725 --> 00:07:30,290
Chúng tôi sẽ kiểm tra nhiều hơn một chút về những gì hình thức xác nhận trong một trong những bài tập sau này,

103
00:07:30,290 --> 00:07:33,020
đặc biệt là đối với các hình thức phản ứng.

104
00:07:33,020 --> 00:07:35,945
Với điều này, chúng tôi hoàn thành bài tập này.

105
00:07:35,945 --> 00:07:38,840
Đây là thời điểm tốt để bạn thực hiện một cam kết git

106
00:07:38,840 --> 00:07:43,080
với các mẫu tin nhắn theo hướng mẫu, phần hai.