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

2
00:00:04,979 --> 00:00:09,281
Cho chúng tôi biết một thời gian ngắn giá trị hình thức và hình thức hỗ trợ trong Angular.

3
00:00:09,281 --> 00:00:14,748
Chúng tôi đã thấy việc sử dụng các hình thức trong khóa học bootstrap trước đó và

4
00:00:14,748 --> 00:00:20,139
chúng tôi đã thấy cách bootstrap cho phép chúng tôi tạo kiểu cho các hình thức HDMI chuẩn.

5
00:00:20,139 --> 00:00:24,664
Trong bài học này, chúng ta sẽ xem xét hỗ trợ Angular cho các hình thức,

6
00:00:24,664 --> 00:00:30,200
hai loại hình thức khác nhau, các hình thức định hướng mẫu và các hình thức phản ứng.

7
00:00:30,200 --> 00:00:32,450
Chúng ta sẽ xem xét sự khác biệt giữa hai, và

8
00:00:32,450 --> 00:00:35,670
nơi mỗi người trong số họ là phù hợp trong ứng dụng Angular của chúng tôi.

9
00:00:35,670 --> 00:00:39,400
Chúng ta sẽ xem xét những ưu điểm và nhược điểm của từng phương pháp

10
00:00:39,400 --> 00:00:43,490
chi tiết hơn trong bài học này và bài học tiếp theo.

11
00:00:44,910 --> 00:00:50,880
Ngoài ra, chúng ta sẽ xem xét xác thực biểu mẫu, cách Angular hỗ trợ xác thực biểu mẫu,

12
00:00:50,880 --> 00:00:55,600
và cách chúng ta có thể thực hiện xác thực biểu mẫu cho mẫu theo hướng của chúng tôi

13
00:00:55,600 --> 00:01:00,420
trong bài giảng tiếp theo, sau bài tập.

14
00:01:02,400 --> 00:01:06,867
Chúng tôi đã nhận ra rằng các hình thức hỗ trợ một trải

15
00:01:06,867 --> 00:01:10,230
nghiệm nhập dữ liệu gắn kết, hiệu quả và hấp dẫn cho người dùng.

16
00:01:10,230 --> 00:01:14,350
Bạn thấy các biểu mẫu được sử dụng ở khắp mọi nơi trên các trang web.

17
00:01:14,350 --> 00:01:14,940
Ví dụ:

18
00:01:14,940 --> 00:01:19,520
khi bạn cần đăng nhập vào một trang web, bạn phải nhập ID người dùng và mật khẩu của bạn.

19
00:01:19,520 --> 00:01:22,210
Hoặc khi bạn cần gửi thông tin ví dụ.

20
00:01:22,210 --> 00:01:26,871
Nếu bạn đang đặt vé xem phim, hoặc nếu bạn đang đặt một

21
00:01:26,871 --> 00:01:32,027
đơn đặt hàng trong một cửa hàng tạp hóa trực tuyến, hoặc nhiều trường hợp sử dụng khác, các

22
00:01:32,027 --> 00:01:37,482
biểu mẫu được sử dụng rộng rãi để cung cấp một cách toàn diện cho

23
00:01:37,482 --> 00:01:43,360
người dùng để nhập thông tin vào các trang web hoặc ứng dụng web.

24
00:01:43,360 --> 00:01:47,922
Khung Angular cung cấp hỗ trợ toàn diện cho

25
00:01:47,922 --> 00:01:51,670
các biểu mẫu, bao gồm các biểu mẫu và biểu mẫu xác thực.

26
00:01:51,670 --> 00:01:57,379
Đây là nơi chúng tôi tận dụng lợi thế của hỗ trợ Angular cho các

27
00:01:57,379 --> 00:02:03,690
thay đổi liên kết dữ liệu hai chiều và theo dõi mà chúng tôi thực hiện trong các yếu tố biểu mẫu, và cũng hình thức xác thực.

28
00:02:03,690 --> 00:02:07,030
Vì vậy, khi bạn nhập dữ liệu vào một trường nhập trong biểu mẫu của bạn,

29
00:02:07,030 --> 00:02:11,330
dữ liệu được tự động đánh giá với hỗ trợ Angular cho biểu mẫu.

30
00:02:11,330 --> 00:02:15,980
Chúng ta sẽ xem xét một số trong số này một cách chi tiết hơn khi chúng ta trải qua các bài học.

31
00:02:15,980 --> 00:02:21,010
Hãy để tôi nhanh chóng nhắc nhở bạn về các hình thức HTML mình.

32
00:02:21,010 --> 00:02:24,790
Bạn đã biết rằng các biểu mẫu được hỗ trợ thông qua các

33
00:02:25,910 --> 00:02:28,200
yếu tố biểu mẫu trong trang HTML của bạn.

34
00:02:28,200 --> 00:02:32,734
Cùng với phần tử biểu mẫu, trong thẻ biểu mẫu, bạn cũng có thể bao gồm những thứ

35
00:02:32,734 --> 00:02:37,561
như <input> <textarea>, <select>, và <button> s, và nhiều thứ khác.

36
00:02:37,561 --> 00:02:42,585
Chúng ta sẽ thấy cách hỗ trợ Angular thực hiện cùng với các

37
00:02:42,585 --> 00:02:47,608
yếu tố HTML form, cho phép chúng ta thiết kế hai loại khác nhau của form,

38
00:02:47,608 --> 00:02:52,292
template driven form và cũng phản ứng form trong Angular.

39
00:02:52,292 --> 00:02:58,585
Trong bài học này, chúng ta sẽ tập trung vào hỗ trợ Angular cho các hình thức định hướng mẫu.

40
00:02:58,585 --> 00:03:03,125
Trong một hình thức định hướng mẫu, họ sẽ sử dụng mẫu Angular cùng với

41
00:03:03,125 --> 00:03:07,250
các yếu tố hình thức mà chúng ta vừa thấy để có thể xây dựng các hình thức và

42
00:03:07,250 --> 00:03:10,646
tận dụng hỗ trợ Angular cho các hình thức định hướng mẫu.

43
00:03:10,646 --> 00:03:15,432
Và chúng ta sẽ có thể liên kết các chỉ thị cụ thể dạng Angular với các

44
00:03:15,432 --> 00:03:20,450
yếu tố biểu mẫu trong các mẫu của chúng tôi, và sau đó tận dụng liên kết dữ liệu hai chiều

45
00:03:20,450 --> 00:03:25,336
cũng tạo thành xác nhận và hỗ trợ lỗi mà Angular cung cấp cho chúng tôi.

46
00:03:25,336 --> 00:03:28,128
Trong bài tập tiếp theo ngay lập tức,

47
00:03:28,128 --> 00:03:32,512
bài giảng này sẽ xem xét cách chúng ta có thể thiết kế một hình thức theo hướng mẫu.

48
00:03:32,512 --> 00:03:37,164
Đặc biệt, chúng ta cũng sẽ xem xét cách liên kết dữ liệu hai chiều với

49
00:03:37,164 --> 00:03:41,986
Angular hỗ trợ, sử dụng chỉ thị NGModel có thể được tận dụng

50
00:03:41,986 --> 00:03:44,894
để buộc thông tin từ biểu mẫu của bạn vào

51
00:03:44,894 --> 00:03:50,430
một số biến JavaScript mà bạn khai báo trong lớp học của bạn.

52
00:03:50,430 --> 00:03:53,610
Trong bài tập ngay lập tức sau bài giảng này,

53
00:03:53,610 --> 00:03:56,960
chúng ta nhìn vào cách chúng ta có thể thiết kế một hình thức theo hướng mẫu.

54
00:03:56,960 --> 00:04:01,350
Đặc biệt, chúng ta sẽ xem xét cách liên kết dữ liệu hai chiều mà Angular hỗ trợ bằng cách sử dụng

55
00:04:01,350 --> 00:04:06,280
chỉ thị NGModel có thể được tận dụng

56
00:04:06,280 --> 00:04:10,870
để buộc thông tin từ biểu mẫu của bạn vào một số biến JavaScript mà bạn khai báo trong lớp học của bạn.

57
00:04:10,870 --> 00:04:14,860
Và đây là nơi chuối trong một cái hộp mà chúng tôi đã đề cập

58
00:04:14,860 --> 00:04:19,140
trước đó với chỉ thị NgModel đến với sự trợ giúp của chúng tôi.

59
00:04:19,140 --> 00:04:22,880
Khi chúng ta trải qua các bài tập, điều này sẽ trở nên rõ ràng hơn.

60
00:04:22,880 --> 00:04:27,139
Bây giờ chúng ta hãy tìm hiểu làm thế nào để tận dụng sự hỗ trợ góc cho các biểu

61
00:04:27,139 --> 00:04:32,585
mẫu theo hướng mẫu để thiết kế các biểu mẫu của chúng tôi trong các bài tập.

62
00:04:32,585 --> 00:04:36,014
[ NHẠC]