1
00:00:03,650 --> 00:00:09,630
Chúng tôi đã giải quyết các hình thức phản ứng trong một trong những bài học trước đó,

2
00:00:09,630 --> 00:00:14,420
nơi chúng tôi đã thực hiện hai bài tập đối phó với các hình thức phản ứng,

3
00:00:14,420 --> 00:00:15,695
cách chúng tôi tạo ra chúng,

4
00:00:15,695 --> 00:00:20,530
và sau đó cũng thực hiện một số xác nhận hình thức cơ bản trên các hình thức phản ứng.

5
00:00:20,530 --> 00:00:24,525
Chúng ta sẽ tiếp tục với chủ đề trong bài học này,

6
00:00:24,525 --> 00:00:28,790
bởi vì các hình thức phản ứng như tên của nó,

7
00:00:28,790 --> 00:00:33,019
có cái gì đó để làm với lập trình phản ứng như bạn có thể đã mong đợi.

8
00:00:33,019 --> 00:00:42,429
Bây giờ, biểu mẫu phản ứng cũng cho phép bạn xem các thay đổi trong các giá trị của các phần tử biểu mẫu,

9
00:00:42,429 --> 00:00:48,320
sử dụng một quan sát được rằng Angular làm cho sẵn có được gọi là ValueChanges.

10
00:00:48,320 --> 00:00:53,450
Chúng tôi sẽ sử dụng ValueChanges có thể quan sát được trong bài tập này,

11
00:00:53,450 --> 00:00:57,080
để theo dõi các thay đổi đối với các giá trị của các

12
00:00:57,080 --> 00:01:01,650
yếu tố biểu mẫu khác nhau của họ và sau đó ngay lập tức kích hoạt xác nhận biểu mẫu.

13
00:01:01,650 --> 00:01:06,350
Trong bài tập này, chúng tôi sẽ làm hầu hết các hình thức xác nhận trong

14
00:01:06,350 --> 00:01:11,120
mã chứ không phải là trong bản thân mẫu,

15
00:01:11,120 --> 00:01:19,189
như chúng tôi đã làm với xác nhận hình thức lò phản ứng trong bài tập thứ hai của các hình thức phản ứng.

16
00:01:19,189 --> 00:01:24,115
Đi liên lạc với t.component.tsfile,

17
00:01:24,115 --> 00:01:29,720
chúng tôi sẽ cập nhật biểu mẫu phản ứng mà chúng tôi đã tạo ra ở đây,

18
00:01:29,720 --> 00:01:34,445
bằng cách thêm một vài Validators cho một số các lĩnh vực này.

19
00:01:34,445 --> 00:01:38,915
Vì vậy, ở đây bạn thấy rằng cho họ đầu tiên và

20
00:01:38,915 --> 00:01:43,465
số điện thoại và email chúng tôi đã thêm các Validators yêu cầu.

21
00:01:43,465 --> 00:01:45,290
Đối với tên đầu tiên và cuối cùng,

22
00:01:45,290 --> 00:01:48,500
tôi sẽ thêm vào một vài Validators cho chiều dài

23
00:01:48,500 --> 00:01:52,315
tối thiểu và chiều dài tối đa.

24
00:01:52,315 --> 00:01:57,185
Bây giờ, nếu bạn có nhiều hơn một Validator trong biểu mẫu phản ứng của

25
00:01:57,185 --> 00:02:04,470
bạn, bạn phải khai báo chúng bằng cách sử dụng một mảng trong đó.

26
00:02:04,470 --> 00:02:08,385
Vì vậy, điều này phải được bao bọc bên trong một mảng ở đây.

27
00:02:08,385 --> 00:02:12,790
Vì vậy, bạn thấy rằng tôi đã kèm theo Validator yêu cầu bên trong một mảng.

28
00:02:12,790 --> 00:02:21,300
Tôi sẽ thêm vào một Validators, MinLength Validator.

29
00:02:21,300 --> 00:02:25,250
Vì vậy, đối với chiều dài tối thiểu, tôi sẽ chỉ định hai là chiều dài tối thiểu,

30
00:02:25,250 --> 00:02:28,925
vì vậy tên đầu tiên phải chứa ít nhất hai ký tự.

31
00:02:28,925 --> 00:02:36,645
Ngoài ra chiều dài tối đa mà tôi sẽ

32
00:02:36,645 --> 00:02:48,035
thêm là 25 ký tự.

33
00:02:48,035 --> 00:02:52,740
Vì vậy, ở đây bạn thấy rằng bây giờ cho tên đầu tiên chúng tôi có ba Validations khác nhau,

34
00:02:52,740 --> 00:02:55,455
tất cả được bao bọc trong một mảng ở đây.

35
00:02:55,455 --> 00:02:58,620
Validators yêu cầu, Validators MinLength,

36
00:02:58,620 --> 00:03:02,135
và Validators MaxLength đây, 25.

37
00:03:02,135 --> 00:03:05,900
Vì vậy, tôi sẽ làm điều tương tự cũng cho họ của tôi.

38
00:03:05,900 --> 00:03:11,115
Vì vậy, hãy để tôi sao chép toàn bộ Validators ray ở đây,

39
00:03:11,115 --> 00:03:21,420
và sau đó thay thế cái này với bộ Validators đó.

40
00:03:21,420 --> 00:03:25,330
Bây giờ ngoài ra, đối với số điện thoại,

41
00:03:25,330 --> 00:03:29,060
như bạn sẽ nhớ lại trong phiên bản trước của biểu mẫu,

42
00:03:29,060 --> 00:03:35,395
số điện thoại đã sẵn sàng chấp nhận ngay cả bảng chữ cái,

43
00:03:35,395 --> 00:03:37,015
nhưng điều đó là không chính xác.

44
00:03:37,015 --> 00:03:40,070
Số điện thoại thường là số.

45
00:03:40,070 --> 00:03:43,955
Vì vậy, đây là nơi chúng tôi sẽ sử dụng một Validator

46
00:03:43,955 --> 00:03:53,005
gọi là mẫu Validators.

47
00:03:53,005 --> 00:03:57,890
Vì vậy, các mẫu Validator cho phép chúng ta xác định một mẫu cho

48
00:03:57,890 --> 00:04:02,719
các giá trị được nhập vào đó phần tử hình thức cụ thể,

49
00:04:02,719 --> 00:04:09,465
và sau đó kiểm tra để đảm bảo rằng giá trị theo mẫu được chỉ định.

50
00:04:09,465 --> 00:04:12,470
Vì vậy, ở đây mô hình mà chúng ta sẽ sử dụng là giá trị

51
00:04:12,470 --> 00:04:17,180
nên chứa chỉ số giữa 0 và 9.

52
00:04:17,180 --> 00:04:19,015
Để thêm mẫu,

53
00:04:19,015 --> 00:04:23,860
chúng ta cần phải làm điều đó trong tập tin mẫu như chúng ta sẽ thấy trong một thời gian ngắn.

54
00:04:23,860 --> 00:04:26,415
Tương tự như vậy, đối với email,

55
00:04:26,415 --> 00:04:31,635
tôi cũng sẽ có một Validator gọi là Validator email.

56
00:04:31,635 --> 00:04:35,035
Vì vậy, chúng tôi sẽ thêm vào email Validators.

57
00:04:35,035 --> 00:04:40,010
Điều này cũng có nghĩa là chúng ta cần phải thêm vào một thuộc tính

58
00:04:40,010 --> 00:04:44,990
được gọi là email vào đầu vào trong tập tin mẫu của chúng tôi.

59
00:04:44,990 --> 00:04:53,145
Bây giờ, với những thay đổi này xác thực biểu mẫu của tôi bây giờ đã trở nên mạnh mẽ hơn trong bài tập này.

60
00:04:53,145 --> 00:04:59,534
Bây giờ, khi các hình thức kinh nghiệm thay đổi trong bất kỳ của nó hình thức yếu tố,

61
00:04:59,534 --> 00:05:09,530
sau đó các Angular framework cung cấp một quan sát được gọi là ValueChanges quan sát.

62
00:05:09,530 --> 00:05:16,150
Vì vậy, tôi sẽ sử dụng ValueChanges quan sát được trên mẫu phản hồi của tôi.

63
00:05:16,550 --> 00:05:19,770
Vì vậy, ValueChanges quan sát được.

64
00:05:19,770 --> 00:05:26,640
Vì vậy, ValueChanges quan sát được bây giờ có thể được đăng ký trong phương pháp cụ thể này.

65
00:05:26,640 --> 00:05:28,415
Vì vậy, khi chúng tôi tạo ra các hình thức chính nó,

66
00:05:28,415 --> 00:05:31,520
chúng tôi sẽ đăng ký với ValueChanges quan sát được ở đây.

67
00:05:31,520 --> 00:05:33,470
Bây giờ, khi ValueChanges,

68
00:05:33,470 --> 00:05:38,274
do đó, bằng cách đăng ký để quan sát này,

69
00:05:38,274 --> 00:05:44,630
trong đăng ký tôi sẽ chỉ định những gì nên được thực hiện khi ValueChanges.

70
00:05:44,630 --> 00:05:49,160
Vì vậy, khi ValueChanges tôi sẽ có được một số dữ liệu ở đây,

71
00:05:49,160 --> 00:05:52,055
từ trang trại để chỉ ra

72
00:05:52,055 --> 00:05:59,050
mà yếu tố hình thức cụ thể đã trải qua sự thay đổi trong giá trị.

73
00:05:59,050 --> 00:06:00,665
Sau đó, khi điều đó xảy ra,

74
00:06:00,665 --> 00:06:07,865
tôi sẽ kích hoạt một phương pháp địa phương mà tôi sẽ thực hiện được gọi là onValueChanged,

75
00:06:07,865 --> 00:06:13,165
và sau đó cung cấp dữ liệu đó như là một tham số để phương pháp này.

76
00:06:13,165 --> 00:06:16,455
Bây giờ, bên trong phương pháp onValueChanged này,

77
00:06:16,455 --> 00:06:20,445
tôi sẽ bắt đầu xác nhận biểu mẫu,

78
00:06:20,445 --> 00:06:27,155
và sau đó xác định một cách thích hợp các thông báo lỗi hình thức dựa trên những gì

79
00:06:27,155 --> 00:06:35,380
đối tượng dữ liệu này mà tôi có được ở đây sẽ chỉ định cho tôi.

80
00:06:35,380 --> 00:06:39,125
Ngoài ra, khi tôi lần đầu tiên tạo biểu mẫu,

81
00:06:39,125 --> 00:06:47,114
tôi sẽ gọi phương pháp onValueChanged mà không có bất kỳ tham số nào,

82
00:06:47,114 --> 00:06:50,250
và điều này sẽ được sử dụng để

83
00:06:50,250 --> 00:06:58,615
thiết lập lại các thông điệp xác nhận biểu mẫu.

84
00:06:58,615 --> 00:07:02,195
Bây giờ, làm thế nào để tạo thông báo xác thực biểu mẫu?

85
00:07:02,195 --> 00:07:09,230
Để làm điều đó, tôi sẽ xác định thông điệp xác nhận hình thức của tôi hoàn toàn trong mã ở đây.

86
00:07:09,230 --> 00:07:12,620
Sau đó, thông qua mã,

87
00:07:12,620 --> 00:07:15,920
tôi sẽ thích ứng với các thông điệp xác nhận hình thức,

88
00:07:15,920 --> 00:07:23,785
và sau đó sẽ được sử dụng để hiển thị các thông báo lỗi trong mẫu của tôi chính nó.

89
00:07:23,785 --> 00:07:33,830
Vì vậy, để làm điều đó, những gì tôi sẽ làm là để thêm một vài đối tượng JavaScript ở đây.

90
00:07:33,830 --> 00:07:42,485
Một trong những đối tượng JavaScript mà tôi sẽ thêm được đặt tên là lỗi biểu mẫu.

91
00:07:42,485 --> 00:07:46,790
Vì vậy, đây là một đối tượng JavaScript đơn giản

92
00:07:46,790 --> 00:07:52,315
sẽ chứa tất cả các lỗi cho các hình thức cụ thể ở đây.

93
00:07:52,315 --> 00:07:54,799
Vì vậy, trong các lỗi mẫu,

94
00:07:54,799 --> 00:08:02,609
tôi sẽ sử dụng bốn trường khác nhau

95
00:08:02,609 --> 00:08:11,275
, tên, họ.

96
00:08:11,275 --> 00:08:13,305
Vì vậy, như bạn nhớ lại,

97
00:08:13,305 --> 00:08:21,889
chúng tương ứng với bốn yếu tố hình thức mà trên đó tôi đang thực hiện xác nhận hình thức,

98
00:08:21,889 --> 00:08:30,470
số điện thoại và email.

99
00:08:30,470 --> 00:08:35,020
Bây giờ, tại sao tôi định nghĩa đối tượng JavaScript này ở đây?

100
00:08:35,020 --> 00:08:41,075
Bây giờ, đối tượng JavaScript này như bạn thấy chứa bốn yếu tố ở đây.

101
00:08:41,075 --> 00:08:44,270
Bây giờ, bất cứ khi nào tôi thực hiện xác nhận biểu mẫu,

102
00:08:44,270 --> 00:08:47,090
nhớ lại rằng tôi đã chỉ định rằng

103
00:08:47,090 --> 00:08:50,915
tôi sẽ tạo ra một phương pháp mới được gọi là onValueChange.

104
00:08:50,915 --> 00:08:55,145
Bên trong OnValueChange, cách mã được viết là,

105
00:08:55,145 --> 00:08:58,300
nếu phát hiện bất kỳ lỗi nào,

106
00:08:58,300 --> 00:09:02,315
một chuỗi chứa thông điệp tương ứng với

107
00:09:02,315 --> 00:09:08,135
lỗi đó sẽ được thêm vào đối tượng JavaScript này.

108
00:09:08,135 --> 00:09:10,535
Vì vậy, theo cách này trong mã của tôi,

109
00:09:10,535 --> 00:09:13,204
tôi có thể thực hiện các hình thức xác nhận.

110
00:09:13,204 --> 00:09:15,315
Bây giờ, ngoài việc này,

111
00:09:15,315 --> 00:09:21,150
bây giờ tôi sẽ xác định một vài thông điệp xác nhận.

112
00:09:21,840 --> 00:09:27,100
Bây giờ, mô hình làm việc đặc biệt này,

113
00:09:27,100 --> 00:09:36,345
tôi đã học được bằng cách đọc tài liệu về xác nhận biểu mẫu trên trang web angular.io.

114
00:09:36,345 --> 00:09:43,020
Vì vậy, họ có một tài liệu toàn bộ về làm thế nào để thực hiện xác nhận hình thức và một liên kết đến đó

115
00:09:43,020 --> 00:09:45,315
có sẵn trong các tài nguyên bổ sung của

116
00:09:45,315 --> 00:09:50,510
chương này và cũng là các chương trước về hình thức góc cạnh.

117
00:09:50,510 --> 00:09:55,950
Vì vậy, trong tài liệu cụ thể đó họ

118
00:09:55,950 --> 00:10:02,655
quy định điều này như là một cách để thực hiện xác nhận biểu mẫu và tôi thấy điều đó rất trực quan.

119
00:10:02,655 --> 00:10:08,640
Vì vậy, tôi cũng áp dụng cùng một mô hình để thực hiện xác nhận biểu mẫu trong mã.

120
00:10:08,640 --> 00:10:10,500
Vì vậy, cùng với ở đây,

121
00:10:10,500 --> 00:10:20,515
tôi sẽ xác định các thông điệp xác nhận cho tất cả các lĩnh vực có thể ở đây.

122
00:10:20,515 --> 00:10:22,475
Vì vậy, đối với trường tên đầu tiên,

123
00:10:22,475 --> 00:10:30,050
tôi sẽ xác định một vài thông điệp xác nhận ở đây, vì vậy tôi sẽ nói,

124
00:10:30,050 --> 00:10:32,965
“bắt buộc” và sau đó nói,

125
00:10:32,965 --> 00:10:39,940
“tên là bắt buộc” như thế này,

126
00:10:39,940 --> 00:10:48,790
tôi sẽ thêm vào một vài thông điệp xác nhận

127
00:10:48,790 --> 00:10:52,030
ở đây và nói,

128
00:10:52,030 --> 00:10:57,070
“Tên phải có

129
00:10:57,070 --> 00:11:05,770
ít nhất 2 ký tự dài” và sau đó tôi sẽ cũng thêm,

130
00:11:05,770 --> 00:11:15,700
“chiều dài tối đa” và thông báo tương ứng sẽ là,

131
00:11:15,700 --> 00:11:23,630
“Tên đầu tiên không thể lớn hơn 25".

132
00:11:24,780 --> 00:11:29,685
Nếu bạn có một cái tên mà chạy vào 25 ký tự,

133
00:11:29,685 --> 00:11:35,115
bạn phải thực sự nguyền rủa cha mẹ của bạn cho điều đó, tin tôi đi,

134
00:11:35,115 --> 00:11:39,670
một trong những tên đệm của tôi là một tên đệm dài,

135
00:11:39,670 --> 00:11:46,035
và tôi không sử dụng một cách rõ ràng trong tài liệu của tôi.

136
00:11:46,035 --> 00:11:48,870
Nhưng, tôi có thể hiểu nỗi đau,

137
00:11:48,870 --> 00:11:55,450
nếu bạn có một tên dài lớn hơn 25 ký tự.

138
00:11:56,700 --> 00:12:02,900
Những người từ một số bang ở miền Nam Ấn Độ có tên dài,

139
00:12:03,690 --> 00:12:06,870
bang của tôi bao gồm, hey, chúng ta

140
00:12:06,870 --> 00:12:09,270
hãy vui vẻ trong khi chúng ta đang ở đó.

141
00:12:09,270 --> 00:12:17,180
Được rồi, tôi cũng sẽ bao gồm cùng một thứ cho họ.

142
00:12:17,180 --> 00:12:23,380
Vì vậy, tôi sẽ chỉnh sửa điều này

143
00:12:23,380 --> 00:12:33,430
và chỉ định điều tương tự như họ.

144
00:12:33,430 --> 00:12:39,020
Vì vậy, như bạn thấy trong mã, bạn có thể chỉ định một tập hợp các thông báo lỗi.

145
00:12:39,020 --> 00:12:42,855
Bây giờ, nếu bạn thêm xác nhận mới vào biểu mẫu của

146
00:12:42,855 --> 00:12:44,505
bạn, tất cả những gì bạn cần làm là,

147
00:12:44,505 --> 00:12:47,230
đến đây và thêm vào thông báo lỗi mới vào

148
00:12:47,230 --> 00:12:54,635
đối tượng JavaScript này và mã của bạn sẽ hoạt động tốt, như vậy.

149
00:12:54,635 --> 00:13:03,015
Vì vậy, đó là lợi thế của việc sử dụng mô hình này để thiết kế xác nhận của bạn trong mã.

150
00:13:03,015 --> 00:13:09,835
Tiếp tục, hãy để tôi xác định xác nhận số điện thoại và

151
00:13:09,835 --> 00:13:17,700
xác nhận hai số điện thoại sẽ xảy ra là “bắt buộc”.

152
00:13:17,700 --> 00:13:22,390
Vì vậy, tôi sẽ chỉ sao chép “bắt buộc” từ đó,

153
00:13:22,390 --> 00:13:24,170
và dán nó vào đây,

154
00:13:24,170 --> 00:13:27,215
và tôi sẽ nói,

155
00:13:27,215 --> 00:13:36,910
“Số điện thoại là bắt buộc”, và thông báo lỗi tiếp theo sẽ là cho “mẫu”.

156
00:13:36,910 --> 00:13:42,585
Vì vậy, thông báo lỗi nói,

157
00:13:42,585 --> 00:13:50,770
“Số điện thoại phải chứa chỉ số.”

158
00:13:50,910 --> 00:13:58,070
Vì vậy, đó là thông điệp khác, tương tự cho email.

159
00:13:58,070 --> 00:14:03,109
Vì vậy, như bạn có thể thấy các giá trị mà tôi đang sử dụng ở đây

160
00:14:03,109 --> 00:14:08,430
tương ứng với tên Validator mà tôi đã sử dụng,

161
00:14:08,430 --> 00:14:12,305
“midlength”, “max length required”, “pattern”.

162
00:14:12,305 --> 00:14:14,280
Vì vậy, tương tự cho email,

163
00:14:14,280 --> 00:14:18,720
bạn sẽ thấy “bắt buộc” và “Email'.

164
00:14:18,720 --> 00:14:28,615
Vì vậy, tôi chỉ cần sao chép “bắt buộc” ở đây và nói, “Email là bắt buộc”.

165
00:14:28,615 --> 00:14:36,020
Các mô hình khác như bạn nhớ lại là cho email và tôi sẽ nói,

166
00:14:36,020 --> 00:14:40,865
“Email không ở định dạng hợp lệ”.

167
00:14:40,865 --> 00:14:43,200
Vì vậy, thông thường nếu email của bạn không chứa

168
00:14:43,200 --> 00:14:48,190
dấu @ và ký tự ở cả hai bên của dấu @,

169
00:14:48,190 --> 00:14:50,230
thì đó không phải là email hợp lệ.

170
00:14:50,230 --> 00:14:58,265
Email Validator này đã được xây dựng vào mô-đun hình thức phản ứng góc.

171
00:14:58,265 --> 00:15:02,240
Vì vậy, chúng tôi sẽ sử dụng các email Validator ở đây.

172
00:15:02,240 --> 00:15:07,450
Vì vậy, ở đây chúng tôi có tất cả các thông điệp xác nhận được xác định trong mã.

173
00:15:07,450 --> 00:15:14,340
Vì vậy, điều đó làm cho nó rất dễ dàng để mở rộng chúng cho các trường bổ sung nếu bạn yêu cầu và cũng

174
00:15:14,340 --> 00:15:17,770
thêm nhiều thông điệp xác thực cho các Xác thực bổ sung

175
00:15:17,770 --> 00:15:21,865
mà bạn có thể giới thiệu cho mỗi trường biểu mẫu đó.

176
00:15:21,865 --> 00:15:25,785
Ngoài ra, lỗi hình thức đối tượng này giúp tôi theo dõi

177
00:15:25,785 --> 00:15:31,415
tất cả các lỗi liên quan đến mỗi yếu tố trong điện thoại của tôi.

178
00:15:31,415 --> 00:15:34,390
Vì vậy, hiện tại tôi chỉ kiểm tra bốn yếu tố này,

179
00:15:34,390 --> 00:15:37,165
vì vậy đó là lý do tại sao tôi chỉ có cho điều đó.

180
00:15:37,165 --> 00:15:42,365
Chỉnh sửa nhỏ, “chiều dài trung bình” nên là min,

181
00:15:42,365 --> 00:15:45,910
nhỏ 'l' và chiều dài tối đa cũng với một 'l' nhỏ,

182
00:15:45,910 --> 00:15:48,140
tương tự cho tên cuối cùng cũng.

183
00:15:48,140 --> 00:15:53,750
Bây giờ, chúng ta hãy viết mã cho các giá trị trên phương pháp thay đổi.

184
00:15:53,750 --> 00:15:55,765
Vì vậy, tôi sẽ viết phương pháp

185
00:15:55,765 --> 00:16:02,860
ở đây, "ValueChanged” và sau đó điều này

186
00:16:02,860 --> 00:16:08,275
sẽ mất trong một tham số, có thể.

187
00:16:08,275 --> 00:16:10,900
Đó là lý do tại sao tôi đặt một dấu hỏi dữ liệu,

188
00:16:10,900 --> 00:16:16,760
có nghĩa là tham số là tùy chọn.

189
00:16:17,760 --> 00:16:27,610
Vì vậy, điều đầu tiên tôi sẽ kiểm tra là, “mẫu phản hồi này”, có

190
00:16:27,610 --> 00:16:32,290
nghĩa là nếu mẫu phản hồi chưa được tạo ra sau đó,

191
00:16:32,290 --> 00:16:34,960
và nếu phương pháp này được gọi,

192
00:16:34,960 --> 00:16:42,130
thì bạn chỉ cần “trả lại” mà không có bất cứ điều gì.

193
00:16:42,130 --> 00:16:50,680
Sau đó, tôi sẽ xác định một

194
00:16:50,680 --> 00:16:56,780
hằng số được gọi là “

195
00:16:56,780 --> 00:17:03,025
mẫu phản hồi này” chỉ là để làm cho nó dễ dàng để xác định phần còn lại của mã,

196
00:17:03,025 --> 00:17:05,380
sau đó tôi sẽ nói, “cho

197
00:17:06,240 --> 00:17:16,330
trường const trong này.form lỗi”.

198
00:17:16,330 --> 00:17:21,510
Vì vậy, lưu ý rằng trường này sẽ có lỗi này.form,

199
00:17:21,510 --> 00:17:24,710
các hình thức lỗi đối tượng mà chúng tôi đã xác định trước đó.

200
00:17:24,710 --> 00:17:28,150
Vì vậy, cảm thấy có nghĩa là tôi sẽ kiểm tra tất cả bốn.

201
00:17:28,150 --> 00:17:29,890
Vì vậy, bất cứ khi nào tôi phát hiện bất kỳ thay đổi

202
00:17:29,890 --> 00:17:31,260
, tên, họ,

203
00:17:31,260 --> 00:17:32,820
số điện thoại và một email.

204
00:17:32,820 --> 00:17:41,080
Vì vậy, đó là lý do tại sao bốn sẽ mang tên chính xác giống như chúng tôi đã sử dụng trong các hình thức ở đây,

205
00:17:41,080 --> 00:17:50,330
và do đó các mã được viết ở đây sẽ được đơn giản để làm việc với.

206
00:17:52,770 --> 00:17:56,650
Vì vậy, bây giờ tôi sẽ kiểm tra các lĩnh vực biểu mẫu.

207
00:17:56,650 --> 00:18:07,090
Sau đó, trước tiên tôi sẽ

208
00:18:07,090 --> 00:18:16,000
đảm bảo rằng trong trường hợp tôi đã trước đó đính kèm bất kỳ thông điệp vào các trường

209
00:18:16,000 --> 00:18:17,810
biểu mẫu, hình thức lỗi đối tượng ở

210
00:18:17,810 --> 00:18:19,665
đó, sau đó tôi sẽ xóa tất cả chúng.

211
00:18:19,665 --> 00:18:23,830
Vì vậy, đó là lý do tại sao nếu bạn gọi điều này không có tham số,

212
00:18:23,830 --> 00:18:26,600
tất cả các trường lỗi biểu mẫu sẽ được xóa,

213
00:18:26,600 --> 00:18:36,335
và sau đó tôi sẽ làm, “kiểm soát FormGet”.

214
00:18:36,335 --> 00:18:44,330
Vì vậy, lưu ý rằng tôi đang sử dụng lĩnh vực đó chính nó để làm một FormGet vì vậy,

215
00:18:44,330 --> 00:18:48,530
tôi nhận được quyền truy cập vào lĩnh vực biểu mẫu cụ thể.

216
00:18:48,530 --> 00:18:52,090
Vì vậy, lưu ý rằng trước đó chúng tôi đã làm “feedbackform.this.feedbackform.get"tên đầu tiên.”

217
00:18:58,930 --> 00:19:04,870
và vân vân. Vì vậy, tôi đã đơn giản hóa những gì vào hằng số đặc biệt này mà chúng tôi

218
00:19:04,870 --> 00:19:13,000
xác định ở đây và sau đó tôi sẽ nói, “Nếu kiểm soát”.

219
00:19:13,000 --> 00:19:22,645
Vì vậy, có nghĩa là nếu kiểm soát không phải là null và “control.dirty”.

220
00:19:22,645 --> 00:19:28,150
Vì vậy, nếu trường cụ thể đó đã bẩn

221
00:19:28,150 --> 00:19:33,635
và không “kiểm soát hợp lệ”.

222
00:19:33,635 --> 00:19:36,280
Vì vậy, có nghĩa là đối với mỗi trường,

223
00:19:36,280 --> 00:19:39,780
tôi theo nghĩa đen kiểm tra để xem nếu nó là hợp lệ,

224
00:19:39,780 --> 00:19:40,840
nếu nó là bẩn,

225
00:19:40,840 --> 00:19:44,260
và sau đó nếu điều khiển đã có.

226
00:19:44,260 --> 00:19:48,430
Sau đó, tôi sẽ kiểm tra để xem những loại lỗi đã được thêm vào điều

227
00:19:48,430 --> 00:19:53,185
khiển đặc biệt này bằng biểu mẫu ở đó.

228
00:19:53,185 --> 00:19:55,045
Vì vậy, trong đây tôi sẽ nói,

229
00:19:55,045 --> 00:19:59,500
“const messages equal

230
00:19:59,500 --> 00:20:06,560
to this this.validation messages field”.

231
00:20:07,260 --> 00:20:10,635
Chú ý làm thế nào tôi đang chọn lên

232
00:20:10,635 --> 00:20:15,785
tất cả các thông điệp xác nhận tương ứng với trường cụ thể tên họ, họ

233
00:20:15,785 --> 00:20:19,370
, hoặc telnum hoặc email,

234
00:20:19,370 --> 00:20:23,585
và sau đó tôi sẽ kiểm tra và xem liệu tôi có cần phải thêm điều này vào trường.

235
00:20:23,585 --> 00:20:25,050
Vậy, làm thế nào để tôi làm điều đó?

236
00:20:25,050 --> 00:20:35,360
Vì vậy, chúng tôi làm cho const key trong control.errors.

237
00:20:35,360 --> 00:20:45,510
Vì vậy, lưu ý rằng điều khiển này là phản hồi form.get lĩnh vực và.error,

238
00:20:45,510 --> 00:20:48,980
vì vậy tôi đang kiểm tra để xem nếu có bất kỳ lỗi có.

239
00:20:48,980 --> 00:20:51,370
Sau đó, trong trường hợp đó,

240
00:20:51,370 --> 00:20:58,485
tôi sẽ thêm trường lỗi biểu mẫu này.

241
00:20:58,485 --> 00:21:06,285
Vì vậy, cho rằng mục cụ thể trong đối tượng JavaScript mà tôi đã định nghĩa ở đây,

242
00:21:06,285 --> 00:21:13,180
tôi sẽ thêm thông điệp chìa khóa

243
00:21:13,180 --> 00:21:21,135
cộng và không gian ở đây.

244
00:21:21,135 --> 00:21:24,590
Vì vậy, bây giờ bất cứ điều gì hình thức khảo sát lỗi

245
00:21:24,590 --> 00:21:27,555
hoặc thông điệp tương ứng sẽ được thực hiện và đính kèm trong,

246
00:21:27,555 --> 00:21:32,350
và sau đó vì vậy lỗi hình thức của tôi đối tượng JavaScript bây giờ sẽ chứa

247
00:21:32,350 --> 00:21:34,970
tất cả các thông báo lỗi gắn liền với nhau khi

248
00:21:34,970 --> 00:21:39,780
này đặc biệt về giá trị thay đổi phương pháp chuột.

249
00:21:39,780 --> 00:21:44,430
Bây giờ, đoạn mã đặc biệt này tôi đã mượn từ

250
00:21:44,430 --> 00:21:50,560
các tài liệu xác nhận hình thức trên angular.iu.

251
00:21:50,560 --> 00:21:55,240
Tôi thấy rằng đây là cách rất trực quan để thực hiện kiểm tra lỗi biểu mẫu.

252
00:21:55,240 --> 00:22:02,195
Vì vậy, tôi nghĩ tại sao không sử dụng nó trong bài tập hình thức phản ứng góc cạnh của chúng tôi.

253
00:22:02,195 --> 00:22:05,515
Vì vậy, thêm mã này trong đó.

254
00:22:05,515 --> 00:22:15,180
Bây giờ, ứng dụng của tôi đã sẵn sàng để thực hiện các hình thức xác nhận cho hình thức phản ứng của tôi.

255
00:22:15,180 --> 00:22:22,500
Vì vậy, bây giờ bước tiếp theo là đi đến liên hệ component.html,

256
00:22:22,500 --> 00:22:25,805
tệp mẫu, và sau đó cập nhật tệp mẫu.

257
00:22:25,805 --> 00:22:28,505
Vì vậy, đi đến tập tin mẫu,

258
00:22:28,505 --> 00:22:31,275
bây giờ chúng ta sẽ đi đến các hình thức,

259
00:22:31,275 --> 00:22:39,100
và trong hình thức này bây giờ thay vì làm tất cả các kiểm tra này trong mã,

260
00:22:39,920 --> 00:22:48,165
bây giờ chúng ta có thể đơn giản hóa rất nhiều mã ở đây trong tập tin mẫu ở đây.

261
00:22:48,165 --> 00:22:50,550
Bây giờ, thay vì làm tất cả các kiểm tra, những

262
00:22:50,550 --> 00:22:56,065
gì chúng tôi nhận ra là các lỗi hình thức đối tượng JavaScript trong

263
00:22:56,065 --> 00:23:00,270
tập tin typescript của tôi nếu có lỗi sau đó

264
00:23:00,270 --> 00:23:05,610
các lỗi hình thức JavaScript đối tượng cho trường cụ thể đó,

265
00:23:05,610 --> 00:23:10,125
sẽ có tất cả các thông báo lỗi gắn liền với nó.

266
00:23:10,125 --> 00:23:11,460
Nếu không có lỗi,

267
00:23:11,460 --> 00:23:14,505
thì những thông báo lỗi đó sẽ không có ở đó.

268
00:23:14,505 --> 00:23:17,860
Vì vậy, đó là những gì tôi sẽ sử dụng để kiểm tra và

269
00:23:17,860 --> 00:23:21,245
xem liệu tôi nên hiển thị lỗi biểu mẫu hay không.

270
00:23:21,245 --> 00:23:24,685
Vì vậy, cho rằng vấn đề thay vì kiểm tra tất cả điều này,

271
00:23:24,685 --> 00:23:34,740
điều duy nhất mà tôi cần phải kiểm tra ở đây là FormErrors firstname, đó là nó.

272
00:23:34,740 --> 00:23:40,450
Vì vậy, rất dễ dàng để kiểm tra lỗi ở đây.

273
00:23:41,110 --> 00:23:47,095
Tương tự như vậy, vì vậy toàn bộ mã này bây giờ được đơn giản hóa ở đây,

274
00:23:47,095 --> 00:23:52,100
và tương tự như khi bạn kiểm tra tin nhắn ở đây

275
00:23:52,100 --> 00:23:56,615
, những gì chúng ta sẽ làm, Tôi sẽ thay đổi toàn bộ điều này từ

276
00:23:56,615 --> 00:24:05,165
yêu cầu chạm vào formerrors.FirstName.

277
00:24:05,165 --> 00:24:08,955
Đó là nó. Nếu tồn tại,

278
00:24:08,955 --> 00:24:14,760
sau đó tất cả các thông báo lỗi tương ứng với điều này sẽ đã có trong đó,

279
00:24:14,760 --> 00:24:19,620
vì vậy tôi chỉ cần làm nội suy và

280
00:24:19,620 --> 00:24:26,555
sau đó hiển thị formerrors.FirstName ở đây,

281
00:24:26,555 --> 00:24:28,385
đơn giản như thế.

282
00:24:28,385 --> 00:24:30,240
Bây giờ, bạn thấy bằng cách thực hiện

283
00:24:30,240 --> 00:24:36,355
tất cả các hình thức xác nhận lỗi và mã và làm tất cả các kiểm tra và như vậy trong mã,

284
00:24:36,355 --> 00:24:40,200
bạn đã xây dựng các thông báo lỗi mà chúng tôi cần phải hiển thị.

285
00:24:40,200 --> 00:24:42,740
Tất cả những gì chúng tôi làm là chúng tôi lấy thông báo lỗi đó và sau đó đặt nó

286
00:24:42,740 --> 00:24:45,745
vào mẫu ở đây, đó là nó.

287
00:24:45,745 --> 00:24:50,105
Mã mẫu trở nên đơn giản hơn trong trường hợp cụ thể này,

288
00:24:50,105 --> 00:24:57,225
và cũng bằng cách thực hiện việc xác nhận mẫu bằng cách sử dụng mã typescript,

289
00:24:57,225 --> 00:25:02,045
chúng tôi đã đơn giản hóa mẫu ở đây cùng một lúc chúng tôi có thể thực hiện việc

290
00:25:02,045 --> 00:25:09,165
xác nhận mẫu phức tạp hơn trong mã typescript của chúng tôi.

291
00:25:09,165 --> 00:25:16,500
Tôi sẽ đi trước và làm cùng một loại thay đổi đối với các lĩnh vực còn lại ở đây,

292
00:25:16,500 --> 00:25:20,460
vì vậy đối với lĩnh vực họ,

293
00:25:20,460 --> 00:25:30,850
tôi sẽ một lần nữa thay thế toàn bộ điều này với formerrors.LastName.

294
00:25:34,100 --> 00:25:41,050
Bây giờ, một lần nữa làm điều tương tự cho số điện thoại.

295
00:25:41,330 --> 00:25:46,910
Bây giờ, một lần nữa khi bạn thấy cấu trúc của mẫu trở nên rất,

296
00:25:46,910 --> 00:25:50,230
rất thống nhất trong trường hợp này.

297
00:25:50,230 --> 00:25:55,020
Vì vậy, đó cũng là một cách khác để đơn giản hóa

298
00:25:55,020 --> 00:26:01,660
cấu trúc mẫu của bạn tiếp tục đến trường email ở đây.

299
00:26:01,660 --> 00:26:06,640
Tôi sẽ làm thay đổi tương tự để lĩnh vực email cũng.

300
00:26:06,640 --> 00:26:10,430
Vì vậy, tôi sẽ nói formerrors.Email

301
00:26:12,470 --> 00:26:19,140
và thay thế này bằng định dạng.email.

302
00:26:19,140 --> 00:26:20,995
Vì vậy, như bạn có thể thấy,

303
00:26:20,995 --> 00:26:28,455
mã mẫu của bạn đã đơn giản hóa đáng kể so với trước đây.

304
00:26:28,455 --> 00:26:32,545
Với điều này tất cả các xác nhận lỗi mà tôi yêu cầu

305
00:26:32,545 --> 00:26:36,600
đã được thêm vào mẫu của tôi và mẫu của tôi bây giờ được cập nhật,

306
00:26:36,600 --> 00:26:38,900
vì vậy chúng ta hãy lưu các thay đổi.

307
00:26:39,560 --> 00:26:46,800
Hai điều khác mà tôi cần phải thêm là thuộc tính được

308
00:26:46,800 --> 00:26:53,255
gọi là email đến lĩnh vực cụ thể này được gọi là email.

309
00:26:53,255 --> 00:26:56,625
Vì vậy, hãy nhớ rằng chúng tôi đã thêm email Validator ở đây.

310
00:26:56,625 --> 00:26:58,300
Vì vậy, cùng với yêu cầu,

311
00:26:58,300 --> 00:27:03,655
tôi sẽ thêm email cũng vào lĩnh vực đầu vào ở đây.

312
00:27:03,655 --> 00:27:05,655
Tương tự như vậy, đối với telnum,

313
00:27:05,655 --> 00:27:08,115
chúng tôi sử dụng mẫu ở đó.

314
00:27:08,115 --> 00:27:14,670
Vì vậy, tôi sẽ thêm vào mô hình để đây là trường đầu vào cho telnum.

315
00:27:14,670 --> 00:27:24,485
Vì vậy, trong lĩnh vực đầu vào tôi sẽ thêm mô hình là bằng và

316
00:27:24,485 --> 00:27:29,250
mô hình mà tôi sẽ thêm là

317
00:27:29,250 --> 00:27:35,350
trong dấu ngoặc vuông zero chín,

318
00:27:35,350 --> 00:27:37,875
và sau đó đặt một ngôi sao ở đó.

319
00:27:37,875 --> 00:27:45,430
Vì vậy, có nghĩa là đây là bất cứ điều gì từ 0 đến 9 lặp đi lặp lại nhiều lần.

320
00:27:45,430 --> 00:27:51,045
Vì vậy, số điện thoại có thể chứa bất kỳ số nào giữa 0 và 9.

321
00:27:51,045 --> 00:27:53,370
Bất kỳ số nào trong số những con số đó.

322
00:27:53,370 --> 00:27:57,085
Bạn cũng có thể đặt một minlength và maxlength vào trường telnum

323
00:27:57,085 --> 00:28:01,100
nếu cho quốc gia cụ thể của bạn số điện thoại có định dạng cố định,

324
00:28:01,100 --> 00:28:02,440
bạn cũng có thể làm điều đó.

325
00:28:02,440 --> 00:28:05,410
Vì vậy, điều đó có thể dễ dàng được thực hiện.

326
00:28:05,410 --> 00:28:08,130
Nhưng, trong bài tập này,

327
00:28:08,130 --> 00:28:13,470
tôi đã không thêm vào giới hạn minlength và maxlength cho telnum ở đây.

328
00:28:13,470 --> 00:28:15,720
Bây giờ, chúng tôi đã thực hiện tất cả các cập nhật, chúng

329
00:28:15,720 --> 00:28:23,150
ta hãy lưu các thay đổi và sau đó đi và xem biểu mẫu trong trình duyệt.

330
00:28:23,150 --> 00:28:25,640
Đi đến trình duyệt bây giờ,

331
00:28:25,640 --> 00:28:28,920
chúng ta hãy cuộn xuống biểu mẫu ở đây.

332
00:28:28,920 --> 00:28:34,775
Hãy nhập tên và như bạn thấy khi bạn nhập chỉ một ký tự duy nhất,

333
00:28:34,775 --> 00:28:38,290
sau đó thông báo lỗi sẽ được hiển thị ngay lập tức,

334
00:28:38,290 --> 00:28:42,490
nhưng thời điểm bạn nhập vào các ký tự bổ sung thông báo lỗi sẽ biến mất.

335
00:28:42,490 --> 00:28:44,980
Tương tự như vậy, cho họ.

336
00:28:44,980 --> 00:28:50,794
Đối với số điện thoại, nếu bạn cố gắng nhập bất cứ thứ gì khác ngoài số,

337
00:28:50,794 --> 00:28:53,830
sau đó các thông báo lỗi sẽ hiển thị.

338
00:28:54,240 --> 00:28:56,575
Vì vậy, bạn có thể nhập,

339
00:28:56,575 --> 00:29:04,790
tương tự cho email, vì vậy bạn thấy rằng email không phải là định dạng không hợp lệ sẽ được hiển thị.

340
00:29:04,790 --> 00:29:10,380
Nếu bạn không có email thì nó cũng hiển thị thông báo lỗi.

341
00:29:10,380 --> 00:29:14,415
Nhưng, thời điểm bạn gõ một cái gì đó như thế này,

342
00:29:14,415 --> 00:29:18,745
thì đây được coi là một định dạng email hợp lệ vì vậy nó sẽ được chấp nhận.

343
00:29:18,745 --> 00:29:23,895
Vì vậy, đó là tập hợp các thông báo lỗi và xác nhận hình thức

344
00:29:23,895 --> 00:29:30,080
được thực hiện hoàn toàn trong mã như được thực hiện trong bài tập đặc biệt này.

345
00:29:30,080 --> 00:29:33,625
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.

346
00:29:33,625 --> 00:29:40,200
Trong bài tập này, chúng ta đã thấy việc sử dụng các thay đổi giá trị là có thể quan sát được,

347
00:29:40,200 --> 00:29:46,915
và chúng ta cũng thấy làm thế nào chúng ta có thể thực hiện xác nhận hình thức trong mã typescript của chúng tôi.

348
00:29:46,915 --> 00:29:49,040
Điều này hoàn thành bài tập này.

349
00:29:49,040 --> 00:29:52,030
Đây là thời điểm tốt để bạn thực hiện một cam kết git với

350
00:29:52,030 --> 00:29:56,310
thông điệp phản ứng tạo thành phần ba.