1
00:00:04,070 --> 00:00:10,290
Chúng tôi vừa hoàn thành việc học về các hình thức định hướng mẫu Angular và cũng có thể,

2
00:00:10,290 --> 00:00:14,300
trong bài tập, xây dựng hình thức định hướng mẫu đầu tiên của chúng tôi.

3
00:00:14,300 --> 00:00:18,210
Bây giờ, khi người dùng nhập thông tin vào các trường biểu mẫu,

4
00:00:18,210 --> 00:00:23,655
chúng tôi có thể muốn xác nhận dữ liệu mà người dùng nhập vào các trường dữ liệu đó.

5
00:00:23,655 --> 00:00:25,630
Trong những ngày đầu của web,

6
00:00:25,630 --> 00:00:28,950
cách duy nhất để kiểm tra dữ liệu là gửi dữ liệu

7
00:00:28,950 --> 00:00:32,580
qua máy chủ và sau đó thực hiện kiểm tra ở phía máy chủ,

8
00:00:32,580 --> 00:00:37,155
và sau đó nhận được kết quả từ phía máy chủ.

9
00:00:37,155 --> 00:00:41,935
Nhưng những ngày này, với các khuôn khổ phía khách hàng mạnh mẽ như Angular,

10
00:00:41,935 --> 00:00:46,580
rất nhiều xác nhận dữ liệu có thể dễ dàng được thực

11
00:00:46,580 --> 00:00:52,070
hiện ở phía khách hàng và chúng ta có thể dễ dàng bắt được rất nhiều lỗi ở phía khách hàng,

12
00:00:52,070 --> 00:00:56,885
và sau đó thậm chí cung cấp chỉ dẫn cho người dùng về các lỗi.

13
00:00:56,885 --> 00:01:00,170
Bây giờ, đây là nơi chúng ta sẽ xem xét hỗ trợ góc cho

14
00:01:00,170 --> 00:01:03,725
xác nhận biểu mẫu và sau đó làm thế nào chúng ta có thể thực hiện xác nhận biểu mẫu,

15
00:01:03,725 --> 00:01:11,170
và sau đó hiển thị thông báo lỗi cho người dùng trong chế độ xem.

16
00:01:11,260 --> 00:01:17,455
HTML5 đã đi kèm với một số hỗ trợ tích hợp để xác nhận biểu mẫu.

17
00:01:17,455 --> 00:01:20,750
Nhưng khi chúng ta đang sử dụng Angular cho ứng dụng của

18
00:01:20,750 --> 00:01:23,840
chúng tôi, trước tiên chúng ta phải tắt xác nhận biểu mẫu HTML5,

19
00:01:23,840 --> 00:01:25,640
để trách nhiệm thực hiện

20
00:01:25,640 --> 00:01:29,750
xác nhận biểu mẫu được chuyển giao cho ứng dụng Angular.

21
00:01:29,750 --> 00:01:32,240
Vì vậy, để làm điều đó cho các hình thức,

22
00:01:32,240 --> 00:01:34,525
như chúng ta đã thấy trong bài tập trước đó,

23
00:01:34,525 --> 00:01:40,760
chúng ta bao gồm các thuộc tính novalidate vào thẻ hình thức đó,

24
00:01:40,760 --> 00:01:43,910
do đó điều này đảm bảo rằng góc cạnh

25
00:01:43,910 --> 00:01:47,585
sẽ đảm bảo trách nhiệm thực hiện xác nhận hình thức.

26
00:01:47,585 --> 00:01:50,645
Angular giúp chúng tôi thực hiện xác nhận biểu mẫu như thế nào?

27
00:01:50,645 --> 00:01:55,324
Đó là những gì chúng tôi sẽ xem xét chi tiết hơn tiếp theo.

28
00:01:55,324 --> 00:01:59,600
Bất cứ khi nào bạn cần thực hiện xác thực biểu mẫu trong Angular,

29
00:01:59,600 --> 00:02:05,570
đặc biệt là khi bạn cần tham chiếu đến các trường biểu mẫu trong mẫu của bạn,

30
00:02:05,570 --> 00:02:09,960
thì bạn cần sự trợ giúp của các biến tham chiếu mẫu Angular.

31
00:02:09,960 --> 00:02:12,725
Làm thế nào để chúng ta xác định một biến tham chiếu mẫu?

32
00:02:12,725 --> 00:02:15,485
Biến tham chiếu mẫu có thể được xác định cho

33
00:02:15,485 --> 00:02:19,235
bất kỳ phần tử nào bằng cách liên kết một biến mẫu như thế này.

34
00:02:19,235 --> 00:02:22,880
Ví dụ, trong trường hợp này đối với hình thức,

35
00:02:22,880 --> 00:02:29,760
chúng tôi đang chỉ định biểu mẫu đăng nhập bằng NGForm.

36
00:02:29,760 --> 00:02:33,160
Tương tự, ví dụ, đối với một trường nhập liệu,

37
00:02:33,160 --> 00:02:35,050
bạn sẽ nói dấu gạch chéo,

38
00:02:35,050 --> 00:02:39,725
hoặc đúng hơn là #username bằng NgModel.

39
00:02:39,725 --> 00:02:46,130
Trong trường hợp này, biểu mẫu đăng nhập và tên người dùng là tất cả các biến tham chiếu mẫu.

40
00:02:46,130 --> 00:02:49,370
Các biến tham chiếu mẫu này sau đó có thể được sử dụng trong khuôn

41
00:02:49,370 --> 00:02:53,800
mẫu Angular của chúng tôi để tham chiếu đến các trường này.

42
00:02:53,800 --> 00:02:56,245
Vì vậy, trong bản thân mẫu,

43
00:02:56,245 --> 00:02:59,060
bạn có thể kiểm tra các trạng thái điều khiển cho các

44
00:02:59,060 --> 00:03:03,289
trường bao gồm những thứ như trường có hợp lệ hay không, cho

45
00:03:03,289 --> 00:03:04,760
dù đó là bẩn,

46
00:03:04,760 --> 00:03:06,430
hoặc nó có một số lỗi.

47
00:03:06,430 --> 00:03:12,865
Chúng tôi sẽ tận dụng sự hỗ trợ này mà Angular cung cấp để thực hiện xác nhận biểu mẫu.

48
00:03:12,865 --> 00:03:15,964
Như tôi đã đề cập, chúng tôi sẽ tận dụng

49
00:03:15,964 --> 00:03:21,870
các biến tham chiếu mẫu để thu thập trạng thái kiểm soát để kiểm tra thông tin.

50
00:03:21,870 --> 00:03:27,370
Vì vậy, ví dụ, bạn có thể nói username.pristine trong mẫu của bạn.

51
00:03:27,370 --> 00:03:30,440
Vì vậy, điều đó đề cập đến việc kiểm tra trạng thái, cho

52
00:03:30,440 --> 00:03:33,960
dù điều khiển cụ thể là trong trạng thái nguyên sơ,

53
00:03:33,960 --> 00:03:39,080
có nghĩa là nó đã không được xúc động và sửa đổi bởi người dùng cho đến nay.

54
00:03:39,080 --> 00:03:41,840
Dơ bẩn là đối lập với nguyên sơ

55
00:03:41,840 --> 00:03:45,050
, có nghĩa là khi một trường bẩn,

56
00:03:45,050 --> 00:03:49,105
thì điều đó có nghĩa là trường đã bị người dùng sửa đổi trong quá khứ.

57
00:03:49,105 --> 00:03:53,090
Tương tự, trạng thái kiểm soát hợp lệ và không hợp lệ

58
00:04:02,360 --> 00:04:06,530
cho phép chúng tôi kiểm tra xem thông tin trong trường đó có hợp lệ hay không hợp lệ, tùy thuộc vào đặc điểm kỹ thuật kiểm tra của bạn về hiệu lực hoặc trạng thái không hợp lệ của trường cụ thể đó.

59
00:04:06,530 --> 00:04:11,990
Vì vậy, ví dụ, bạn có thể kiểm tra xem bạn đã khai báo một trường theo yêu cầu,

60
00:04:11,990 --> 00:04:14,930
điều đó có nghĩa là bạn mong đợi người dùng

61
00:04:14,930 --> 00:04:18,790
nhập ít nhất một số thông tin vào trường.

62
00:04:18,790 --> 00:04:24,280
Sự vắng mặt của thông tin trong trường trong biểu mẫu của bạn có nghĩa là trường không hợp lệ.

63
00:04:24,280 --> 00:04:28,670
Tương tự, bạn có thể chỉ định đại lục hoặc chiều dài tối đa của một giá trị trường,

64
00:04:28,670 --> 00:04:31,970
để bạn có thể dễ dàng kiểm tra xem số ký tự

65
00:04:31,970 --> 00:04:35,500
trong một trường có khoảng độ dài chính

66
00:04:35,500 --> 00:04:37,660
hay dưới độ dài tối đa, v.v.

67
00:04:37,660 --> 00:04:39,380
Trong bài tập sau đây,

68
00:04:39,380 --> 00:04:42,740
chúng tôi sẽ áp dụng các phương pháp xác nhận hình thức khác nhau cho

69
00:04:42,740 --> 00:04:47,080
hình thức hướng mẫu của chúng tôi mà chúng tôi đã thiết kế trong bài tập trước đó.

70
00:04:47,080 --> 00:04:51,564
Ví dụ, trong biểu mẫu của bạn,

71
00:04:51,564 --> 00:04:54,170
bạn có thể tắt nút gửi bằng cách kiểm tra

72
00:04:54,170 --> 00:04:56,770
xem biểu mẫu đó có ở trạng thái hợp lệ hay không.

73
00:04:56,770 --> 00:05:00,650
Vì vậy, trong trường hợp này, bạn sẽ liên kết người bị vô hiệu hóa

74
00:05:00,650 --> 00:05:05,875
và đặt nó bằng với biểu mẫu đăng nhận.form.invalid,

75
00:05:05,875 --> 00:05:07,970
có nghĩa là khi biểu mẫu không hợp lệ,

76
00:05:07,970 --> 00:05:10,480
nút này sẽ bị vô hiệu hóa trong trường hợp này.

77
00:05:10,480 --> 00:05:15,910
Vì vậy, người dùng sẽ không được phép gửi thông tin thông qua biểu mẫu cụ thể này.

78
00:05:15,910 --> 00:05:18,995
Vì vậy, đây là một cách để đảm bảo rằng các

79
00:05:18,995 --> 00:05:22,700
mục nhập không chính xác sẽ không được gửi bởi người dùng thông qua biểu mẫu.

80
00:05:22,700 --> 00:05:25,100
Tương tự, đối với các trường cụ

81
00:05:25,100 --> 00:05:30,080
thể, bạn có thể kiểm tra xem trường đã được điền hay chưa.

82
00:05:30,080 --> 00:05:33,125
Vì vậy, nếu bạn chỉ định rằng một trường cụ thể được yêu cầu

83
00:05:33,125 --> 00:05:36,620
bằng cách xác định thuộc tính bắt buộc cho trường đầu vào,

84
00:05:36,620 --> 00:05:39,320
sau đó bạn có thể kiểm tra để xem liệu có lỗi của

85
00:05:39,320 --> 00:05:43,250
loại yêu cầu được nêu ra cho phần tử trường cụ thể ở đó hay không.

86
00:05:43,250 --> 00:05:45,020
Vì vậy, trong mã của bạn ví dụ,

87
00:05:45,020 --> 00:05:47,390
bạn thậm chí có thể chỉ định để thông báo cho người dùng về

88
00:05:47,390 --> 00:05:51,035
thực tế là một trường cụ thể là không chính xác.

89
00:05:51,035 --> 00:05:56,885
Anh dùng lỗi mat-error để biểu thị điều đó.

90
00:05:56,885 --> 00:06:01,230
Vì vậy, thẻ mat-error, xuất phát từ,

91
00:06:01,230 --> 00:06:06,555
một lần nữa, hỗ trợ hình thức vật liệu Angular như bạn thấy ở đây,

92
00:06:06,555 --> 00:06:09,195
nếu NGIf hóa ra là đúng,

93
00:06:09,195 --> 00:06:15,560
thì thông báo đó sẽ được hiển thị bên dưới trong trường đầu vào ở đó,

94
00:06:15,560 --> 00:06:17,100
và tương tự

95
00:06:17,100 --> 00:06:20,405
như trường đầu vào, sẽ được đánh dấu là màu đỏ trong màn hình.

96
00:06:20,405 --> 00:06:25,085
Vì vậy, đây là một cái gì đó mà bạn sẽ được kiểm tra và

97
00:06:25,085 --> 00:06:30,000
đảm bảo và cũng cung cấp thông báo lỗi cho người dùng.

98
00:06:30,000 --> 00:06:31,740
Trong bài tập sau đây,

99
00:06:31,740 --> 00:06:35,980
chúng tôi sẽ áp dụng cách tiếp cận này để kiểm tra tên người dùng và mật khẩu.

100
00:06:35,980 --> 00:06:40,700
Chúng tôi sẽ chỉ định rằng các trường này là bắt buộc và nếu người dùng

101
00:06:40,700 --> 00:06:45,565
không nhập bất kỳ thông tin nào vào các trường này sau khi trường đã được chạm vào,

102
00:06:45,565 --> 00:06:51,210
sau đó chúng tôi sẽ đảm bảo rằng thông báo lỗi thích hợp được hiển thị cho người dùng.

103
00:06:51,210 --> 00:06:57,469
Vì vậy, với sự hiểu biết nhanh chóng về xác nhận biểu mẫu trong Angular, chúng ta

104
00:06:57,469 --> 00:06:58,970
hãy chuyển sang bài tập,

105
00:06:58,970 --> 00:07:03,410
nơi chúng ta sẽ kiểm tra cách chúng ta có thể thực hiện xác nhận biểu mẫu đơn giản cho biểu

106
00:07:03,410 --> 00:07:08,160
mẫu đăng nhập của chúng tôi và sau đó có thể hiển thị thông báo lỗi.

107
00:07:08,160 --> 00:07:12,470
Chúng tôi sẽ trở lại để hình thành xác nhận trong một trong những bài tập sau này,

108
00:07:12,470 --> 00:07:19,660
sau khi chúng tôi đã tìm hiểu thêm về hỗ trợ phản ứng trong Angular.