1
00:00:00,000 --> 00:00:04,438
[MUSIC]

2
00:00:04,438 --> 00:00:08,934
Chúng tôi vừa hoàn thành việc học về các mẫu theo hướng mẫu theo

3
00:00:08,934 --> 00:00:12,310
góc cạnh trong bài học trước đó.

4
00:00:12,310 --> 00:00:18,336
Angular cũng hỗ trợ một cách khác để thiết kế các dạng được gọi là dạng

5
00:00:18,336 --> 00:00:25,390
phản ứng, các dạng phản ứng sử dụng kiểu lập trình phản ứng cho các dạng hỗ trợ.

6
00:00:25,390 --> 00:00:28,050
Chúng ta sẽ nói về lập trình phản ứng một cách ngắn gọn trong

7
00:00:28,050 --> 00:00:31,110
một trong những bài học sau này trong mô-đun này.

8
00:00:31,110 --> 00:00:34,180
Nhưng ngay bây giờ, chúng ta sẽ đối phó với các dạng phản ứng và

9
00:00:34,180 --> 00:00:38,410
xem làm thế nào chúng ta có thể thiết kế các dạng phản ứng theo góc cạnh và

10
00:00:38,410 --> 00:00:44,430
những đặc điểm độc đáo của việc làm các dạng phản ứng theo góc cạnh tiếp theo là gì.

11
00:00:46,150 --> 00:00:52,310
Phong cách phản ứng của lập trình chủ trương quản lý rõ ràng

12
00:00:52,310 --> 00:00:58,500
dữ liệu chảy giữa mô hình dữ liệu phi UI và mô hình

13
00:00:58,500 --> 00:01:04,280
hình dạng định hướng UI và đây là cách tiếp cận mà các dạng phản ứng lấy trong Angular.

14
00:01:04,280 --> 00:01:09,240
Bây giờ điều đó có thể không có ý nghĩa gì với bạn tại thời điểm này nhưng khi chúng tôi hoàn thành

15
00:01:09,240 --> 00:01:14,860
bài tập này và bài giảng, nó sẽ trở nên rõ ràng hơn với bạn

16
00:01:14,860 --> 00:01:21,530
tại sao phương pháp phản ứng phù hợp với thiết kế hình thức đó trong một số ngữ cảnh nhất định.

17
00:01:21,530 --> 00:01:26,630
Bây giờ trong cách tiếp cận phản ứng, chúng ta tạo ra một cây của các

18
00:01:26,630 --> 00:01:30,810
đối tượng điều khiển dạng góc cạnh, bên trong lớp thành phần.

19
00:01:30,810 --> 00:01:33,300
Bây giờ trong mẫu định hướng mà bạn đã thấy trước đó,

20
00:01:34,450 --> 00:01:38,870
chúng tôi thiết kế các hình thức bằng cách sử dụng cách tiếp cận mẫu HTML, vì vậy

21
00:01:38,870 --> 00:01:44,075
tất cả các điều khiển biểu mẫu chúng tôi được đưa vào mẫu đó trong mẫu HTML và

22
00:01:44,075 --> 00:01:49,667
chúng tôi chủ yếu quản lý dữ liệu và chúng tôi được gắn vào

23
00:01:49,667 --> 00:01:55,770
đối tượng thành phần của họ thông qua các mô hình NG trực tiếp.

24
00:01:55,770 --> 00:02:01,280
Trong cách tiếp cận này, chúng tôi sẽ tạo ra cấu trúc hình thức đó trong thành phần của chúng tôi và

25
00:02:01,280 --> 00:02:06,220
sau đó buộc cấu trúc hình thức vào các điều khiển vững chắc trong mẫu của chúng tôi, vì vậy

26
00:02:06,220 --> 00:02:10,860
chúng tôi sẽ liên kết các hình thức cây mà chúng tôi

27
00:02:10,860 --> 00:02:15,920
tạo ra trong lớp thành phần của chúng tôi để các

28
00:02:15,920 --> 00:02:20,910
yếu tố hình thức bản địa trong tập tin mẫu của chúng tôi ở đó.

29
00:02:20,910 --> 00:02:25,530
Vì vậy, trong cách tiếp cận này lớp thành phần có

30
00:02:25,530 --> 00:02:30,390
quyền truy cập ngay lập tức đến cả mô hình dữ liệu cũng như cấu trúc điều khiển hình thức và vì vậy

31
00:02:30,390 --> 00:02:36,575
chúng ta có thể lấy mô hình dữ liệu và đẩy nó vào cấu trúc điều khiển hình thức và

32
00:02:36,575 --> 00:02:40,985
tương ứng lấy thông tin ra khỏi cấu trúc điều khiển hình thức và

33
00:02:40,985 --> 00:02:43,355
sau đó ánh xạ nó vào mô hình dữ liệu.

34
00:02:43,355 --> 00:02:48,355
Vì vậy, mô hình dữ liệu đến từ cuối trở lại có thể được ánh xạ vào

35
00:02:48,355 --> 00:02:53,410
cấu trúc điều khiển hình thức được phản ánh trong quan điểm thông qua mẫu đó

36
00:02:54,550 --> 00:02:58,280
và cầu nối giữa chúng được thực hiện trong lớp thành phần

37
00:02:58,280 --> 00:03:02,660
bằng cách tạo ra cấu trúc hình thức bên trong lớp thành phần.

38
00:03:02,660 --> 00:03:07,330
Bây giờ, điều này không có ý nghĩa

39
00:03:07,330 --> 00:03:12,230
gì với bạn tại thời điểm này, nhưng khi chúng tôi thực hiện bài tập, nó sẽ trở nên rõ ràng hơn với bạn cách

40
00:03:12,230 --> 00:03:17,080
ràng buộc này giữa mô hình dữ liệu và cấu trúc điều khiển công ty có thể được thực hiện

41
00:03:17,080 --> 00:03:22,185
bên trong lớp thành phần trong mã kịch bản kiểu của các thành phần lớp học.

42
00:03:22,185 --> 00:03:26,700
Vì vậy, đây là nơi chúng ta sẽ tận dụng các mô hình phản ứng, kiểm tra và

43
00:03:26,700 --> 00:03:31,160
xác nhận để có lợi thế lớn, vì vậy

44
00:03:31,160 --> 00:03:35,170
cách tiếp cận dạng phản ứng này hỗ trợ các mô hình phản ứng của lập trình, như tôi đã nói, chúng ta sẽ nói về

45
00:03:35,170 --> 00:03:39,880
lập trình phản ứng phản ứng hơn một chút sau đó trong mô-đun này.

46
00:03:40,900 --> 00:03:45,470
Ngoài ra, thực tế là chúng ta tạo ra các hình thức trong mã

47
00:03:45,470 --> 00:03:50,840
có nghĩa là việc kiểm tra và đánh giá các hình thức trở nên dễ dàng hơn rất nhiều.

48
00:03:50,840 --> 00:03:54,040
Mẫu điều khiển biểu mẫu là rất khó để kiểm tra

49
00:03:54,040 --> 00:03:58,770
bởi vì phần lớn cấu trúc nằm trong mã mẫu, vì vậy

50
00:03:58,770 --> 00:04:03,800
cách tiếp cận phản ứng cho bản thân nó tốt hơn nhiều để kiểm tra đơn vị và

51
00:04:03,800 --> 00:04:10,150
cũng cho xác nhận hình thức như chúng ta sẽ thấy một chút sau đó trong bài tập.

52
00:04:10,150 --> 00:04:15,650
Hãy suy nghĩ ngắn gọn về một số ưu điểm của việc sử dụng các hình thức phản ứng.

53
00:04:15,650 --> 00:04:20,820
Một trong những ưu điểm là các giá trị ở dạng mà các phần tử

54
00:04:20,820 --> 00:04:25,986
có sẵn ngay lập tức và đồng bộ với mã trừu tượng.

55
00:04:25,986 --> 00:04:29,990
Trong mẫu điều khiển nó mất trên chu kỳ cho

56
00:04:29,990 --> 00:04:35,510
bất kỳ thay đổi được viết mẫu để được phản ánh vào mã của bạn

57
00:04:35,510 --> 00:04:40,990
ở đó, nhưng trong cách tiếp cận phản ứng, bit đồng bộ, dữ liệu và

58
00:04:40,990 --> 00:04:46,491
quan điểm được duy trì chặt chẽ.

59
00:04:46,491 --> 00:04:50,680
Thứ hai, các dạng phản ứng, như tôi đã đề cập,

60
00:04:50,680 --> 00:04:55,560
dễ dàng hơn để thực hiện kiểm tra đơn vị và điều này trở nên rất quan trọng

61
00:04:55,560 --> 00:05:01,240
khi bạn đang thiết kế một bản sao góc rất phức tạp.

62
00:05:01,240 --> 00:05:04,320
Các hình thức phản ứng được hỗ trợ cho một số

63
00:05:04,320 --> 00:05:08,240
lớp học có sẵn cho các hình thức góc thư viện.

64
00:05:08,240 --> 00:05:13,390
Một trong số đó là lớp FormControl mà quyền kiểm soát hình thức cá nhân là

65
00:05:13,390 --> 00:05:19,350
chúng tôi bao gồm trong hình thức của chúng tôi các yếu tố cá nhân và cũng cho phép chúng tôi theo

66
00:05:19,350 --> 00:05:24,360
dõi giá trị của những giới hạn và thực hiện xác nhận các yếu tố đó.

67
00:05:25,500 --> 00:05:29,110
FormGroup là một nhóm FormControl, vì vậy

68
00:05:29,110 --> 00:05:32,420
khi bạn muốn tổ chức FormControls với nhau như một nhóm và

69
00:05:32,420 --> 00:05:37,700
sau đó theo dõi thông tin về những nhóm như một toàn thể, sau đó FormGroup

70
00:05:37,700 --> 00:05:43,240
cho phép bạn kết hợp một nhóm FormControls với nhau.

71
00:05:44,780 --> 00:05:48,850
Ngoài ra, chúng tôi cũng có một lớp AbstractControl là một lớp

72
00:05:48,850 --> 00:05:53,930
dựa trừu tượng cho các lớp FormControl, cũng có thể được sử dụng để lợi thế của chúng

73
00:05:53,930 --> 00:05:58,500
tôi mặc dù chúng tôi muốn nhìn thấy chúng cụ thể trong bài tập sau này,

74
00:05:58,500 --> 00:06:02,630
nhưng chúng tôi sẽ trở lại để sử dụng chúng vào một thời điểm sau.

75
00:06:05,600 --> 00:06:10,430
Và chúng tôi cũng có một lớp FormArray cho phép bạn xác định

76
00:06:10,430 --> 00:06:15,410
một mảng số lập chỉ mục của trường hợp AbstractControl, một

77
00:06:15,410 --> 00:06:19,460
lần nữa, cả AbstractControl và FormArray, chúng tôi sẽ không rõ ràng kiểm tra

78
00:06:19,460 --> 00:06:24,950
trong bài học cụ thể này, nhưng chúng tôi sẽ thấy chúng sau này trong khóa học.

79
00:06:24,950 --> 00:06:28,070
Một khía cạnh thú vị khác của các hình thức phản ứng

80
00:06:28,070 --> 00:06:29,950
là sự sẵn có của FormBuilder.

81
00:06:29,950 --> 00:06:36,925
Lớp FormBuilder cho phép sử dụng để tạo ra các biểu mẫu trong mã TypeScript của chúng tôi và

82
00:06:36,925 --> 00:06:42,115
sau đó có thể buộc chúng với các điều khiển mẫu đó ở đó.

83
00:06:42,115 --> 00:06:47,218
Vì vậy, để sử dụng Form Builder Class bạn nhập Form Builder từ các

84
00:06:47,218 --> 00:06:52,483
hình thức góc cạnh và sau đó sau khi bạn có thể sử dụng các Form Builder để xây dựng các hình thức,

85
00:06:52,483 --> 00:06:57,424
như nếu bạn sử dụng và làm mà các lớp chuyển đổi Form và nhóm Form

86
00:06:57,424 --> 00:07:03,040
class như chúng ta đã thấy trong slide trước đó mã là một phức tạp hơn một chút.

87
00:07:03,040 --> 00:07:08,180
Nhưng bằng cách sử dụng lớp FormBuilder, nó làm giảm sự lặp đi lặp lại inclitic của

88
00:07:08,180 --> 00:07:13,610
mã của bạn và làm cho nó nhỏ gọn hơn rất nhiều để xác định phông chữ.

89
00:07:13,610 --> 00:07:16,440
Chúng tôi sẽ sử dụng lớp FormBuilder như cách tiếp cận để

90
00:07:16,440 --> 00:07:19,760
xây dựng các hình thức trong bài tập mà sau đó và

91
00:07:19,760 --> 00:07:26,170
ví dụ này được bắt nguồn từ bài tập mà bạn sẽ làm ngay sau bài giảng này.

92
00:07:26,170 --> 00:07:31,320
Vì vậy, ở đây bạn có thể thấy rằng chúng tôi đã xây dựng một hình thức, như một nhóm các

93
00:07:31,320 --> 00:07:39,100
yếu tố điều khiển hình thức và mỗi người trong số họ có tên cụ thể và cũng có giá trị được trao cho họ.

94
00:07:39,100 --> 00:07:43,540
Bằng cách tạo mô hình biểu mẫu trong mã typescript của chúng tôi,

95
00:07:43,540 --> 00:07:48,030
bạn không tự động điền vào mô hình biểu mẫu, bạn cần phải điền riêng

96
00:07:48,030 --> 00:07:51,190
mô hình biểu mẫu đặc biệt nếu bạn lấy dữ liệu trong mô hình dữ liệu,

97
00:07:51,190 --> 00:07:55,280
sau đó mô hình dữ liệu cần phải được ánh xạ vào mô hình biểu mẫu của bạn để điền vào các giá trị,

98
00:07:55,280 --> 00:08:00,580
vì vậy biểu mẫu mô hình và mô hình dữ liệu được giữ riêng biệt trong các hình thức phản ứng.

99
00:08:00,580 --> 00:08:05,340
Trong các mẫu điều khiển mẫu bạn thấy rằng chúng tôi đang trực tiếp cố gắng vào các

100
00:08:05,340 --> 00:08:09,990
đối tượng dữ liệu từ tập tin mẫu để mã trừu tượng của chúng tôi.

101
00:08:09,990 --> 00:08:12,710
Vì vậy, trong trường hợp này các hình thức và mô hình dữ liệu được giữ riêng biệt, vì vậy

102
00:08:12,710 --> 00:08:17,610
bất kỳ thay đổi mà bạn thực hiện cho các

103
00:08:17,610 --> 00:08:22,660
phần tử DOM trong biểu mẫu của bạn sẽ chảy vào mô hình biểu mẫu và

104
00:08:22,660 --> 00:08:28,030
bạn phải phản ánh rõ ràng dữ liệu biểu mẫu trở lại

105
00:08:28,030 --> 00:08:33,670
mô hình dữ liệu đó ngay cả thông qua một dịch vụ hoặc bất cứ điều gì có nghĩa là bạn chọn,

106
00:08:33,670 --> 00:08:39,240
vì vậy sự tách biệt này giúp chúng ta thiết kế mã của chúng tôi tốt hơn nhiều, như chúng ta sẽ thấy sau này.

107
00:08:40,520 --> 00:08:45,490
Hai phương pháp có sẵn cho chúng tôi để điền vào một mô hình biểu mẫu từ một mô hình dữ liệu.

108
00:08:45,490 --> 00:08:50,280
Chúng tôi có phương pháp setValue (), cho phép chúng tôi gán mọi điều khiển biểu mẫu

109
00:08:50,280 --> 00:08:54,710
cho một giá trị cụ thể từ mô hình dữ liệu hoặc chúng tôi có một PatchValue (),

110
00:08:54,710 --> 00:08:59,360
cho phép bạn cập nhật chỉ một số điều khiển trong mô hình biểu mẫu của bạn.

111
00:08:59,360 --> 00:09:02,970
Vì vậy, một khi bạn có được mô hình dữ liệu từ phía sau, từ mô hình dữ liệu,

112
00:09:02,970 --> 00:09:08,030
bạn có thể vá các giá trị vào mô hình biểu mẫu của bạn hoặc ánh xạ các giá trị từ

113
00:09:08,030 --> 00:09:13,130
mô hình dữ liệu của bạn vào mô hình biểu mẫu của bạn, rất thường xuyên, chúng tôi sẽ tạo ra mô hình dữ liệu,

114
00:09:13,130 --> 00:09:18,740
mà một cách hợp lý phản chiếu cấu trúc của biểu mẫu.

115
00:09:18,740 --> 00:09:22,060
Trong bài tập mà sau bạn sẽ thấy rằng tôi có một mô hình dữ liệu

116
00:09:22,060 --> 00:09:24,210
mà là dựa trên một lớp học,

117
00:09:24,210 --> 00:09:30,030
mà phản ánh rất chặt chẽ các mô hình hình thức mà chúng tôi sử dụng trong ví dụ của chúng tôi có.

118
00:09:31,740 --> 00:09:38,263
Với sự hiểu biết nhanh chóng về các hình thức phản ứng, bây giờ chúng ta hãy tiến hành bài tập

119
00:09:38,263 --> 00:09:43,880
nơi chúng ta sẽ tăng gấp đôi một hình thức phản ứng trong ứng dụng góc cạnh

120
00:09:43,880 --> 00:09:47,958
của chúng ta và trên đường đi củng cố

121
00:09:47,958 --> 00:09:52,866
một số thuật ngữ và một số ý tưởng mà chúng ta vừa khám phá trong bài học này.

122
00:09:52,866 --> 00:09:59,009
[ NHẠC]