1
00:00:03,890 --> 00:00:09,395
Chúng tôi vừa tìm hiểu về sự hỗ trợ Angular cho các hình thức

2
00:00:09,395 --> 00:00:12,125
, và đặc biệt là hình thức hướng theo mẫu.

3
00:00:12,125 --> 00:00:17,520
Trong bài tập này, chúng tôi sẽ tạo ra một biểu mẫu theo hướng mẫu và sau đó đưa vào

4
00:00:17,520 --> 00:00:23,375
hộp thoại thành phần đăng nhập của chúng tôi mà chúng tôi đã tạo ra trong bài tập trước đó.

5
00:00:23,375 --> 00:00:29,580
Trong bài giảng này, mẫu định hướng mà chúng tôi tạo ra,

6
00:00:29,580 --> 00:00:34,850
cho phép người dùng nhập tên người dùng và mật khẩu của họ vào biểu mẫu đăng nhập,

7
00:00:34,850 --> 00:00:37,700
và sau đó gửi thông tin này cho ứng dụng của chúng tôi.

8
00:00:37,700 --> 00:00:41,825
Bây giờ, làm thế nào thông tin này được xử lý bởi phía máy chủ,

9
00:00:41,825 --> 00:00:44,990
đó là để lại cho một khóa học sau.

10
00:00:44,990 --> 00:00:49,310
Nhưng cho thời điểm này, chúng tôi có một cách để nắm bắt tên người dùng và mật khẩu

11
00:00:49,310 --> 00:00:54,285
được gửi bởi người dùng thông qua biểu mẫu hướng dẫn đăng nhập,

12
00:00:54,285 --> 00:00:58,210
mà chúng tôi sẽ thiết kế trong bài tập này.

13
00:00:58,210 --> 00:01:01,115
Tiếp tục với bài tập,

14
00:01:01,115 --> 00:01:05,030
bước đầu tiên để có thể tận dụng

15
00:01:05,030 --> 00:01:08,890
việc sử dụng các biểu mẫu định hướng mẫu là đi đến tập

16
00:01:08,890 --> 00:01:17,140
tin module.t ứng dụng và sau đó nhập một vài mô-đun hỗ trợ cho ứng dụng của chúng tôi.

17
00:01:17,140 --> 00:01:20,764
Vì vậy, điều đầu tiên mà tôi sẽ nhập là

18
00:01:20,764 --> 00:01:33,155
MatformFieldModule từ

19
00:01:33,155 --> 00:01:38,085
trường hình thức vật liệu Angular.

20
00:01:38,085 --> 00:01:44,600
Vì vậy, điều này cho phép chúng ta nhóm lại với nhau một loạt các mục vào một trường biểu mẫu ở đó.

21
00:01:44,600 --> 00:01:52,190
Sau đó, chúng tôi cũng sẽ nhập khẩu MatinPutModule.

22
00:01:52,190 --> 00:01:58,100
Mô-đun đầu vào hỗ trợ thành phần đầu vào

23
00:01:58,100 --> 00:02:03,650
là thành phần vật liệu góc cách điệu

24
00:02:03,650 --> 00:02:09,690
hỗ trợ trường biểu mẫu đầu vào từ các biểu mẫu HTML tại đây.

25
00:02:09,690 --> 00:02:15,520
Sau đó, cũng cho phép tôi nhập một MatCheckBox,

26
00:02:18,680 --> 00:02:29,895
mô-đun tương ứng từ hộp kiểm Vật liệu góc.

27
00:02:29,895 --> 00:02:32,690
Vì vậy, ba hỗ trợ

28
00:02:32,690 --> 00:02:36,410
ba yếu tố hình thức mà chúng tôi sẽ sử dụng khi chúng tôi tạo ra ứng dụng của chúng tôi.

29
00:02:36,410 --> 00:02:42,420
Mô-đun trường hình thức cho phép chúng ta nhóm lại với nhau một loạt các yếu tố hình thức ở đó.

30
00:02:42,420 --> 00:02:46,240
Mô-đun đầu vào cho phép chúng ta tạo ra một trường đầu vào trong đó.

31
00:02:46,240 --> 00:02:48,460
Mô-đun hộp kiểm, như bạn mong đợi,

32
00:02:48,460 --> 00:02:50,570
cho phép chúng tôi tạo một hộp kiểm.

33
00:02:50,570 --> 00:02:53,670
Ngoài ra, tôi cũng cần nhập

34
00:02:53,670 --> 00:03:06,190
FormSmodule từ các hình thức Angular.

35
00:03:06,190 --> 00:03:10,130
FormSmodule là một trong đó hỗ trợ các biểu mẫu trong Angular.

36
00:03:10,130 --> 00:03:12,445
Đây là một trong đó hỗ trợ các hình thức định hướng mẫu.

37
00:03:12,445 --> 00:03:15,280
Vì vậy, bây giờ mà chúng tôi đã nhập khẩu những, rõ ràng,

38
00:03:15,280 --> 00:03:23,775
bước tiếp theo là đi vào trang trí NGModule và sau đó kéo chúng vào vị trí ở đây.

39
00:03:23,775 --> 00:03:30,560
Vì vậy, chúng tôi sẽ đi vào đây và sau đó nhập FormSmodule.

40
00:03:30,660 --> 00:03:38,200
Hãy để tôi nhập FormFieldModule,

41
00:03:38,200 --> 00:03:45,075
InputModule, CheckBoxModule ở đây.

42
00:03:45,075 --> 00:03:49,325
Sau đó, bây giờ mô-đun ứng dụng của tôi đã sẵn sàng

43
00:03:49,325 --> 00:03:55,125
để hỗ trợ việc sử dụng các mẫu định hướng trong ứng dụng của chúng tôi.

44
00:03:55,125 --> 00:03:57,485
Bây giờ chúng tôi đã hoàn thành điều này, chúng

45
00:03:57,485 --> 00:03:59,530
ta hãy đi đến thành phần đăng nhập.

46
00:03:59,530 --> 00:04:02,320
Phần lớn công việc của chúng tôi là trong thành phần đăng nhập.

47
00:04:02,320 --> 00:04:04,090
Trước tiên, hãy để tôi thiết kế mẫu.

48
00:04:04,090 --> 00:04:07,975
Vì vậy, đi vào tập tin mẫu thành phần đăng nhập,

49
00:04:07,975 --> 00:04:14,345
hãy để tôi thêm vào mẫu cho biểu mẫu của chúng tôi để tạo ra biểu mẫu ở đây.

50
00:04:14,345 --> 00:04:16,190
Vì vậy, ở trên cùng,

51
00:04:16,190 --> 00:04:25,940
tôi sẽ tạo ra một p

52
00:04:25,940 --> 00:04:30,715
mà sẽ hiển thị các thông tin mà tôi đã gõ vào biểu mẫu.

53
00:04:30,715 --> 00:04:36,750
Trong mã, chúng ta sẽ có một biến JavaScript được gọi là user,

54
00:04:36,750 --> 00:04:41,175
mà sẽ được gắn vào các trường trong biểu mẫu này.

55
00:04:41,175 --> 00:04:42,500
Bây giờ, khi chúng ta tạo ra điều đó,

56
00:04:42,500 --> 00:04:43,690
thì sẽ trở nên rõ ràng hơn.

57
00:04:43,690 --> 00:04:45,490
Bây giờ, ở đây, bằng cách bao gồm điều này,

58
00:04:45,490 --> 00:04:50,100
những gì tôi cho phép là thể hiện những thay đổi.

59
00:04:50,100 --> 00:04:52,990
Khi chúng ta nhập thông tin vào biểu mẫu,

60
00:04:52,990 --> 00:04:56,390
các thay đổi tương ứng xảy ra trong mã để

61
00:04:56,390 --> 00:05:00,880
phản ánh trạng thái biểu mẫu có thể được hiển thị ngay tại đó.

62
00:05:00,880 --> 00:05:04,500
Bây giờ, ngoài ra, bây giờ tôi sẽ tạo ra các hình thức ở đây.

63
00:05:04,500 --> 00:05:07,210
Vì vậy, chúng tôi sẽ đi vào và sau đó thêm các yếu tố hình thức ở đây.

64
00:05:07,210 --> 00:05:09,470
Để yếu tố hình thức này,

65
00:05:09,470 --> 00:05:11,000
tôi sẽ áp dụng

66
00:05:11,000 --> 00:05:15,260
các thuộc tính novalidate ở đây bởi vì

67
00:05:15,260 --> 00:05:19,625
chúng tôi muốn xác nhận hình thức được thực hiện chăm sóc của Angular và không phải

68
00:05:19,625 --> 00:05:28,820
bởi xác nhận HTML mẫu chuẩn

69
00:05:28,820 --> 00:05:30,230
mà trình duyệt hỗ trợ.

70
00:05:30,230 --> 00:05:38,810
Vì vậy, chúng tôi sẽ chuyển trách nhiệm đó vào ứng dụng Angular của chúng tôi.

71
00:05:38,810 --> 00:05:44,800
Vì vậy, đó là lý do tại sao tôi chỉ định thuộc tính novalidate cho điện thoại của tôi.

72
00:05:44,800 --> 00:05:47,310
Vì vậy, điều đó tạo ra hình dạng của tôi ở đây.

73
00:05:47,310 --> 00:05:53,720
Bên trong đây, tôi sẽ sử dụng nội dung mat-dialog-content.

74
00:05:53,790 --> 00:05:58,360
Bây giờ, nội dung mat-dialog-content, như bạn mong đợi,

75
00:05:58,360 --> 00:06:03,740
là một khu vực chứa nội dung của hộp thoại chính nó.

76
00:06:03,740 --> 00:06:06,970
Vì vậy, đó là lý do tại sao chúng tôi đặt nội dung mat-dialog-content vào đây.

77
00:06:06,970 --> 00:06:14,265
Sau đó, ở đây, tôi sẽ tạo ra biểu mẫu của tôi ở đây.

78
00:06:14,265 --> 00:06:16,675
Vì vậy, tôi đặt một p ở đó.

79
00:06:16,675 --> 00:06:23,915
Bên trong p đó, tôi sẽ sử dụng một mat-form-field ở đây.

80
00:06:23,915 --> 00:06:28,805
Vì vậy, các mat-form-field cho phép tôi nhóm lại với nhau một tập hợp

81
00:06:28,805 --> 00:06:33,845
các yếu tố liên quan đến hình thức mà tôi sử dụng cùng nhau.

82
00:06:33,845 --> 00:06:39,765
Vì vậy, ở đây, tôi sẽ đưa vào đầu vào đây.

83
00:06:39,765 --> 00:06:44,505
Vì vậy, trường biểu mẫu đầu vào từ các hình thức tệp HTML.

84
00:06:44,505 --> 00:06:50,255
Sau đó, với điều này, tôi sẽ áp dụng thuộc tính MatinPut

85
00:06:50,255 --> 00:06:57,360
mà sẽ cho phép chúng tôi áp dụng kiểu dáng thiết kế vật liệu cho đầu vào này.

86
00:06:57,360 --> 00:07:04,635
Sau đó, chúng tôi sẽ cung cấp cho một giữ chỗ cho điều này như tên người dùng,

87
00:07:04,635 --> 00:07:06,569
và như bạn mong đợi,

88
00:07:06,569 --> 00:07:12,220
và loại sẽ là loại văn bản ở đây.

89
00:07:15,140 --> 00:07:19,830
Hãy để tôi thêm vào NGModel.

90
00:07:19,830 --> 00:07:30,000
Vì vậy, một mẫu định hướng được hỗ trợ thông qua các thuộc tính ngModel ở đây.

91
00:07:30,000 --> 00:07:31,520
Vì vậy, với NGModel.

92
00:07:31,520 --> 00:07:36,130
Vì vậy, bạn có thể thấy cách thức hộp thư chuối để khai báo điều này.

93
00:07:36,130 --> 00:07:40,270
Sau đó, chúng ta sẽ nói user.username.

94
00:07:40,270 --> 00:07:48,345
Vì vậy, người dùng này sẽ là một đối tượng JavaScript trong tập tin TypeScript của tôi, trong

95
00:07:48,345 --> 00:07:52,440
đó sẽ chứa một tài sản tên người dùng ở đó,

96
00:07:52,440 --> 00:07:58,540
mà sẽ theo dõi giá trị mà bạn nhập vào trường đầu vào này trong hình thức của tôi ở đó.

97
00:07:58,540 --> 00:08:06,320
Vì vậy, đó là lý do tại sao chúng tôi đang buộc thông tin lĩnh vực đầu vào này vào đối tượng JavaScript.

98
00:08:06,320 --> 00:08:08,890
Vì vậy, đây là ràng buộc dữ liệu hai chiều mà chúng tôi đang làm

99
00:08:08,890 --> 00:08:13,250
giữa các yếu tố hình thức và mã JavaScript tương ứng.

100
00:08:13,250 --> 00:08:19,640
Sau đó, chúng tôi sẽ cung cấp tên này như tên người dùng ở đây.

101
00:08:19,640 --> 00:08:24,495
Vì vậy, đó là trường biểu mẫu đầu tiên của tôi mà tôi đã thêm vào đây.

102
00:08:24,495 --> 00:08:29,330
Bây giờ, tương tự, tôi sẽ thêm vào trường biểu mẫu thứ hai cho mật khẩu.

103
00:08:29,330 --> 00:08:36,255
Vì vậy, cho rằng, để tôi sao chép nó và sau đó dán nó xuống đây.

104
00:08:36,255 --> 00:08:41,820
Vì vậy, trường thứ hai sẽ là Đầu vào, MatinPut,

105
00:08:41,820 --> 00:08:47,760
giữ chỗ là mật khẩu,

106
00:08:47,760 --> 00:08:52,360
và sau đó loại là mật khẩu.

107
00:08:52,360 --> 00:09:01,385
Vì vậy, các yếu tố nhập mật khẩu từ HTML5 hình thức hỗ trợ.

108
00:09:01,385 --> 00:09:11,050
Bản thân NgModel sẽ được gắn vào mật khẩu người dùng và tên sẽ là mật khẩu.

109
00:09:11,050 --> 00:09:16,335
Vì vậy, bạn thấy rằng đối tượng JavaScript người dùng bây giờ chứa hai thuộc tính,

110
00:09:16,335 --> 00:09:20,700
tên người dùng và mật khẩu, mà sẽ theo dõi thông tin đăng nhập của người dùng ở đây.

111
00:09:20,700 --> 00:09:24,995
Vì vậy, hai lĩnh vực hình thức bên trong p này ở đây,

112
00:09:24,995 --> 00:09:27,740
và sau đó chúng ta cũng sẽ thêm vào một cái

113
00:09:27,740 --> 00:09:35,795
gọi là mat-hộp kiểm.

114
00:09:35,795 --> 00:09:41,050
Bạn đã thấy rằng chúng tôi đã bao gồm các mô-đun hộp kiểm trước đó.

115
00:09:41,050 --> 00:09:43,290
Vì vậy, chúng ta sẽ thêm vào trong này.

116
00:09:43,290 --> 00:09:48,735
Bây giờ, hộp kiểm này khi đánh dấu sẽ thông báo cho

117
00:09:48,735 --> 00:09:55,990
ứng dụng Angular của tôi rằng tên người dùng và mật khẩu nên được lưu trong ứng dụng.

118
00:09:55,990 --> 00:10:01,220
Vì vậy, hãy để tôi buộc điều này trong với mô hình NG để

119
00:10:01,220 --> 00:10:09,730
một thuộc tính tương ứng được gọi là remember trong đối tượng người dùng.

120
00:10:09,730 --> 00:10:11,060
Vì vậy, điều này sẽ là, thuộc

121
00:10:11,060 --> 00:10:14,020
tính này sẽ là đúng hoặc sai tùy thuộc

122
00:10:14,020 --> 00:10:17,315
vào việc hộp kiểm được đánh dấu hoặc bỏ chọn.

123
00:10:17,315 --> 00:10:19,830
Vì vậy, đó là cách chúng tôi theo dõi.

124
00:10:19,830 --> 00:10:24,795
Vì vậy, chúng tôi đang làm hai chiều dữ liệu ràng buộc giữa hộp kiểm này và

125
00:10:24,795 --> 00:10:32,330
thuộc tính này được gọi là nhớ của đối tượng JavaScript người dùng trong mã của tôi ở đó.

126
00:10:32,330 --> 00:10:36,260
Sau đó, tên sẽ được nhớ,

127
00:10:36,260 --> 00:10:43,590
và sau đó chúng tôi sẽ cho nó một nhãn như nhớ tôi.

128
00:10:43,850 --> 00:10:46,620
Vì vậy, khi người dùng kiểm tra điều này,

129
00:10:46,620 --> 00:10:50,200
thì thông tin của người dùng sẽ được ghi nhớ ở đây.

130
00:10:50,200 --> 00:10:52,410
Vì vậy, đó là hộp kiểm mat-mà chúng tôi đã thêm vào.

131
00:10:52,410 --> 00:10:54,270
Vì vậy, chúng tôi có ba lĩnh vực ở đây,

132
00:10:54,270 --> 00:10:56,585
tên người dùng, mật khẩu,

133
00:10:56,585 --> 00:11:02,880
và sau đó một hộp kiểm ở đây trong biểu mẫu của tôi ở đây.

134
00:11:02,880 --> 00:11:06,090
Vì vậy, đây là một nội dung đối thoại mat-dialog ở đây.

135
00:11:06,090 --> 00:11:08,800
Bây giờ, ngoài nội dung mat-dialog,

136
00:11:08,800 --> 00:11:14,985
tôi cũng có thể thêm các hành động mat-dialog ở đây.

137
00:11:14,985 --> 00:11:23,820
Bây giờ, các hành động hộp thoại có thể chứa các nút tương ứng với hộp thoại này.

138
00:11:23,820 --> 00:11:28,145
Vì vậy, đây là những gì sẽ hoạt động như các nút hành động trong cuộc đối thoại,

139
00:11:28,145 --> 00:11:32,210
và cũng kể từ khi chúng được kèm theo bên trong biểu mẫu,

140
00:11:32,210 --> 00:11:36,485
các nút này cũng sẽ hoạt động như các nút gửi biểu mẫu cho tôi.

141
00:11:36,485 --> 00:11:44,530
Vì vậy, ở đây, hãy để tôi làm một khoảng cách flex lớp đệm,

142
00:11:46,580 --> 00:11:52,670
và sau đó cho phép tôi thêm vào một nút,

143
00:11:55,950 --> 00:12:02,140
mat-nút, và sau đó nút này,

144
00:12:02,140 --> 00:12:07,090
Tôi cũng sẽ biến điều đó thành một nút đóng mat-hộp thoại.

145
00:12:07,090 --> 00:12:12,115
Vì vậy, đây sẽ là một nút hủy bỏ mà tôi sẽ bao gồm trong hình thức của tôi ở đây,

146
00:12:12,115 --> 00:12:14,925
sau đó điều này được nhấp vào cuộc đối thoại sẽ được bác bỏ,

147
00:12:14,925 --> 00:12:17,960
và về cơ bản đó có nghĩa là bạn không gửi mẫu ở đó.

148
00:12:17,960 --> 00:12:20,505
Vì vậy, điều đó cũng hoạt động như nút hủy bỏ cho biểu mẫu,

149
00:12:20,505 --> 00:12:23,595
và sau đó cũng bỏ cuộc đối thoại cùng một lúc.

150
00:12:23,595 --> 00:12:27,180
Vì vậy, bằng cách sử dụng thuộc tính này để nút này,

151
00:12:27,180 --> 00:12:31,595
chúng tôi đang tuyên bố điều này như là nút mà bác bỏ lỗi,

152
00:12:31,595 --> 00:12:36,940
giống như cách mà chúng tôi có nút này trong thanh công cụ.

153
00:12:36,940 --> 00:12:38,990
Vì vậy, mat-dialog đóng ở đó.

154
00:12:38,990 --> 00:12:42,470
Sau đó, nút khác mà chúng tôi sẽ có là

155
00:12:42,470 --> 00:12:49,490
để gửi để

156
00:12:49,490 --> 00:12:55,030
loại nút này sẽ là nút gửi bên trong một hình thức có.

157
00:12:55,030 --> 00:12:56,315
Vì vậy, khi điều này được nhấp vào,

158
00:12:56,315 --> 00:13:01,495
mà kích hoạt trình mẫu cho biểu mẫu này ở đây,

159
00:13:01,495 --> 00:13:06,420
và sau đó cho phép tôi thêm vào một lớp này,

160
00:13:06,420 --> 00:13:13,795
chúng ta sẽ nói nền chính, và văn bản hoa.

161
00:13:13,795 --> 00:13:19,345
Những lớp học tôi đã thêm vào tập tin Styles.acss của tôi ở đó.

162
00:13:19,345 --> 00:13:24,800
Vì vậy, văn bản hoa trắng,

163
00:13:24,800 --> 00:13:31,620
và nút này sẽ được dán nhãn là nút đăng nhập ở đó.

164
00:13:31,620 --> 00:13:36,090
Vì vậy, đây sẽ là một nút màu xanh sẽ được hiển thị trong màn hình ở đó.

165
00:13:36,090 --> 00:13:43,275
Vì vậy, với điều này, cấu trúc hình thức của tôi được tạo ra trong mẫu ở đó.

166
00:13:43,275 --> 00:13:49,355
Bây giờ, bước tiếp theo là đi vào mã và sau đó xử lý các biểu mẫu nộp chính nó.

167
00:13:49,355 --> 00:13:54,070
Vì vậy, bây giờ sẽ đăng nhập các thành phần tập tin,

168
00:13:54,070 --> 00:13:57,400
chúng ta cần phải xử lý việc nộp biểu mẫu ở đây.

169
00:13:57,400 --> 00:14:02,070
Bây giờ, bước đầu tiên mà tôi sẽ làm là khi thành phần đăng nhập này được tạo ra,

170
00:14:02,070 --> 00:14:12,110
chúng tôi sẽ tạo ra một đối tượng người dùng ở đây với tên người dùng thuộc tính,

171
00:14:12,110 --> 00:14:16,550
đó sẽ là một chuỗi trống để bắt đầu với,

172
00:14:16,610 --> 00:14:22,570
mật khẩu cũng sẽ là một chuỗi trống để bắt đầu với,

173
00:14:22,570 --> 00:14:27,050
và sau đó nhớ đó là sai.

174
00:14:27,050 --> 00:14:29,640
Bây giờ, bằng cách tuyên bố này ở đây,

175
00:14:29,640 --> 00:14:33,530
chúng tôi cũng đang nói rằng chúng ta có thể buộc trong

176
00:14:33,530 --> 00:14:40,210
ba thuộc tính này để ba yếu tố hình thức trong mẫu của tôi.

177
00:14:40,210 --> 00:14:43,920
Vì vậy, đó là những gì chúng tôi đã đạt được ở đây.

178
00:14:43,920 --> 00:14:46,440
Đối với các constructor, hãy để

179
00:14:46,440 --> 00:14:55,640
tôi tiêm ref đối thoại ở đây,

180
00:14:55,880 --> 00:15:05,410
mat-dialogue ref, và ref đối thoại mat này sẽ lấy các thành phần tương ứng.

181
00:15:05,410 --> 00:15:08,755
Vì vậy, đây là một tham chiếu đến thành phần đăng nhập này ở đây.

182
00:15:08,755 --> 00:15:11,990
Vì vậy, mà cho chúng ta biết khi này- khi này được gửi,

183
00:15:11,990 --> 00:15:14,060
làm thế nào để xử lý này.

184
00:15:14,060 --> 00:15:21,985
Vì vậy, trong đây, hãy để tôi thêm vào một chức năng on submit ở đây,

185
00:15:21,985 --> 00:15:24,155
và bên trong chức năng on submit,

186
00:15:24,155 --> 00:15:27,935
tôi sẽ chỉ đơn giản là đăng nhập,

187
00:15:27,935 --> 00:15:32,145
đăng nhập thông tin người dùng tương ứng,

188
00:15:32,145 --> 00:15:35,690
vì vậy sau đó người dùng nhấp vào biểu mẫu đăng nhập,

189
00:15:35,690 --> 00:15:39,430
biểu mẫu đăng nhập và nộp biểu mẫu đăng nhập.

190
00:15:39,430 --> 00:15:44,585
Tôi chỉ cần đăng nhập thông tin của người dùng vào giao diện điều khiển vào lúc này.

191
00:15:44,585 --> 00:15:49,150
Sau đó, chúng tôi sẽ thiết kế trong khóa học phía máy chủ.

192
00:15:49,150 --> 00:15:52,310
Chúng tôi sẽ xử lý quá trình đăng nhập thực tế khi

193
00:15:52,310 --> 00:15:57,280
máy chủ của chúng tôi đã sẵn sàng và có thể xử lý đăng nhập của người dùng.

194
00:15:57,280 --> 00:16:03,710
Vì vậy, sau này, chúng ta sẽ nói cuộc đối thoại này ref đóng.

195
00:16:03,710 --> 00:16:06,255
Bây giờ, tại sao chúng ta lại bao gồm điều này ở đây?

196
00:16:06,255 --> 00:16:08,105
Vì vậy, khi biểu mẫu được gửi,

197
00:16:08,105 --> 00:16:13,960
chúng tôi cũng muốn loại bỏ các thành phần ở đó,

198
00:16:13,960 --> 00:16:15,190
các thành phần đối thoại ở đó.

199
00:16:15,190 --> 00:16:16,800
Vì vậy, bằng cách gọi

200
00:16:16,800 --> 00:16:19,120
này, đối thoại ref đóng,

201
00:16:19,120 --> 00:16:23,620
chúng tôi đang yêu cầu các thành phần đối thoại để được đóng ở đây.

202
00:16:23,620 --> 00:16:29,650
Vì vậy, đó là lý do tại sao tôi nhận được một tham chiếu đến thành phần đăng nhập ở đây,

203
00:16:29,650 --> 00:16:33,655
đó là hoạt động như thành phần đối thoại của tôi ở đây.

204
00:16:33,655 --> 00:16:37,445
Vì vậy, chúng tôi sẽ có thể đóng thành phần hộp thoại bằng cách làm điều này.

205
00:16:37,445 --> 00:16:39,350
Vì vậy, một khi người dùng gửi biểu mẫu,

206
00:16:39,350 --> 00:16:41,440
bạn sẽ đăng nhập thông tin người dùng,

207
00:16:41,440 --> 00:16:46,415
và sau đó đóng hộp thoại. Đó là nó.

208
00:16:46,415 --> 00:16:51,640
Hãy lưu các thay đổi và sau đó đi và xem ứng dụng được cập nhật.

209
00:16:51,640 --> 00:16:54,590
Đi vào ứng dụng của chúng tôi trong trình duyệt,

210
00:16:54,590 --> 00:17:02,900
cho phép tôi mở bảng điều khiển JavaScript để bạn có thể xem thông tin được đăng nhập.

211
00:17:02,900 --> 00:17:09,890
Hãy để tôi mở hộp thoại đăng nhập ở đây với biểu mẫu đã có sẵn,

212
00:17:09,890 --> 00:17:12,425
tên người dùng và mật khẩu đã có sẵn.

213
00:17:12,425 --> 00:17:15,820
Vì vậy, hãy để tôi gõ vào tên của người dùng.

214
00:17:15,820 --> 00:17:19,165
Tôi đang tự ái ở đây.

215
00:17:19,165 --> 00:17:22,710
Vì vậy, tôi đang gõ vào tên người dùng và mật khẩu ở đây.

216
00:17:22,710 --> 00:17:26,495
Bây giờ, lưu ý rằng khi tôi gõ vào thông tin ở đây,

217
00:17:26,495 --> 00:17:33,570
vì tôi đang hiển thị giá trị của đối tượng JavaScript người dùng ở đây,

218
00:17:33,570 --> 00:17:42,775
bất kỳ thay đổi nào mà tôi thực hiện ngay lập tức được phản ánh vào màn hình ở đây.

219
00:17:42,775 --> 00:17:50,110
Ngoài ra hộp kiểm nhớ được đánh dấu và tắt ở đây.

220
00:17:50,110 --> 00:17:53,360
Sau đó, khi tôi gửi biểu mẫu ở đây,

221
00:17:53,360 --> 00:17:56,040
bạn có thể thấy rằng trong giao diện điều khiển,

222
00:17:56,040 --> 00:17:59,350
thông tin của người dùng được đăng nhập vào giao diện điều khiển

223
00:17:59,350 --> 00:18:00,595
, tên người dùng, mật khẩu

224
00:18:00,595 --> 00:18:03,440
và giá trị nhớ bị khóa vào giao diện điều khiển.

225
00:18:03,440 --> 00:18:06,170
Vì vậy, bây giờ bạn có thể thấy rằng biểu mẫu đăng nhập của tôi,

226
00:18:06,170 --> 00:18:09,275
mẫu định hướng đang hoạt động chính xác.

227
00:18:09,275 --> 00:18:12,305
Với điều này, chúng tôi hoàn thành bài tập này,

228
00:18:12,305 --> 00:18:18,965
nơi chúng tôi đã thấy làm thế nào chúng tôi có thể thiết kế một mẫu hướng trong ứng dụng Angular của chúng tôi.

229
00:18:18,965 --> 00:18:22,870
Đây là thời điểm tốt để bạn thực hiện một Git Commit với thông báo,

230
00:18:22,870 --> 00:18:26,000
Template Driven Forms Phần 1.