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

2
00:00:04,735 --> 00:00:09,734
Bây giờ chúng ta đã có một giới thiệu nhanh chóng về xác nhận hình thức phản ứng

3
00:00:09,734 --> 00:00:14,901
trong bài giảng trước đó, chúng ta hãy tiếp tục bài tập tiếp theo mà chúng ta có thể

4
00:00:14,901 --> 00:00:20,926
áp dụng xác nhận hình thức cho hình thức phản ứng mà chúng ta đã tạo ra trong bài tập trước đó.

5
00:00:20,926 --> 00:00:26,101
Vì vậy, đi đến tập tin typescript thành phần liên hệ của chúng tôi, chúng

6
00:00:26,101 --> 00:00:34,463
ta hãy thêm vào các validators biểu mẫu cho mỗi thuộc tính trong mô hình biểu mẫu của chúng tôi.

7
00:00:34,463 --> 00:00:42,264
Vì vậy, đối với tên đầu tiên tôi sẽ nói trong mảng, Validators.

8
00:00:45,794 --> 00:00:50,830
Yêu cầu, Tương tự như vậy tôi sẽ

9
00:00:50,830 --> 00:00:55,977
áp dụng tương tự cho, tên cuối cùng.

10
00:00:58,032 --> 00:01:02,361
Sau đó, email, và cũng cho telnum, vì vậy đối với

11
00:01:02,361 --> 00:01:09,030
telnum tôi sẽ nói cho ba còn lại tôi có thể để chúng mở,

12
00:01:09,030 --> 00:01:16,066
bởi vì tôi đồng ý với hoặc là sai hoặc đúng và cung cấp cho họ các giá trị khác.

13
00:01:16,066 --> 00:01:21,117
Bởi vì nó là một chuyển đổi nhẹ và contacttype có thể mất chỉ một trong

14
00:01:21,117 --> 00:01:26,166
ba giá trị và giá trị mặc định đã được đưa ra ở đó,

15
00:01:26,166 --> 00:01:30,470
và cho tin nhắn, chúng tôi có thể làm cho nó không phải là một giá trị yêu cầu.

16
00:01:30,470 --> 00:01:32,595
Nếu người dùng không muốn nhập chú thích,

17
00:01:32,595 --> 00:01:36,030
bạn có thể cho phép họ không nhập chú thích, nhưng nếu muốn,

18
00:01:36,030 --> 00:01:39,619
bạn có thể thêm bộ xác thực. Yêu cầu ngay cả đối với tin nhắn.

19
00:01:39,619 --> 00:01:46,890
Ngoài ra, khi bạn đặt lại biểu mẫu trong phương pháp onSubmit ở đây

20
00:01:46,890 --> 00:01:52,910
bạn cũng có thể đặt lại biểu mẫu về giá trị ban đầu của nó như chúng tôi đã chỉ

21
00:01:52,910 --> 00:01:57,630
định trong phương pháp mà chúng tôi đã tạo biểu mẫu.

22
00:01:57,630 --> 00:02:05,100
Vì vậy, trong giá trị đặt lại, nó có một đối tượng như một tham số ở đây.

23
00:02:05,100 --> 00:02:10,479
Đối tượng này sẽ được sử dụng bởi phương pháp đặt lại bằng cách

24
00:02:10,479 --> 00:02:17,447
sử dụng phương pháp đặt giá trị mà chúng ta đã thấy trong bài giảng trước đó để đặt lại

25
00:02:17,447 --> 00:02:24,192
biểu mẫu về điều kiện như khi nó được tạo ra ban đầu.

26
00:02:24,192 --> 00:02:28,467
Vì vậy, ở đây chúng ta có thể cung cấp các

27
00:02:28,467 --> 00:02:35,442
thông số như tên họ: '',

28
00:02:35,442 --> 00:02:41,745
tên họ: '', telnum: 0,

29
00:02:43,660 --> 00:02:47,219
Sau đó email: '',

30
00:02:49,160 --> 00:02:53,690
đồng ý: false,

31
00:02:53,690 --> 00:03:01,132
contacttype: 'None',

32
00:03:01,132 --> 00:03:07,940
message: ''});.

33
00:03:07,940 --> 00:03:11,206
Vì vậy, những giá trị mà chúng tôi cung cấp trong

34
00:03:14,042 --> 00:03:19,081
đối tượng JavaScript này mà chúng tôi cung cấp cho chúng tôi các tham số để các

35
00:03:19,081 --> 00:03:23,514
phương pháp reset sẽ có chính xác các giá trị giống như chúng tôi đã thấy cho

36
00:03:23,514 --> 00:03:28,168
các thuộc tính này khi chúng tôi tạo ra hình thức phản hồi đó.

37
00:03:28,168 --> 00:03:32,325
Chúng tôi cũng cần phải đặt lại biểu mẫu hoàn toàn trong mẫu.

38
00:03:32,325 --> 00:03:36,532
Vì vậy, để làm điều đó, để quay trở lại nhập khẩu ở đây, và

39
00:03:36,532 --> 00:03:43,130
sau đó chúng tôi cũng sẽ nhập khẩu ViewChild} từ '@angular /core';.

40
00:03:43,130 --> 00:03:45,950
Điều này sẽ cho phép chúng tôi để có được quyền truy cập vào

41
00:03:45,950 --> 00:03:49,910
bất kỳ yếu tố dom con trong mẫu của tôi.

42
00:03:49,910 --> 00:03:54,054
Vì vậy, sau khi làm điều này, đi vào mã,

43
00:03:54,054 --> 00:03:59,321
ở đây trong ContactComponent, tôi có thể nói @ViewChild,

44
00:03:59,321 --> 00:04:04,250
và sau đó tôi sẽ có thể tham khảo FeedbackForm bằng cách

45
00:04:04,250 --> 00:04:09,088
cho nó một biến mẫu với tên fform.

46
00:04:09,088 --> 00:04:14,698
Bạn sẽ làm điều đó trong bước tiếp theo, và sau đó vì vậy cho điều này,

47
00:04:14,698 --> 00:04:19,770
tôi sẽ tham khảo điều này bằng cách sử dụng FeedbackFormDirective.

48
00:04:21,890 --> 00:04:27,030
Vì vậy, điều này cho phép chúng tôi có thể truy cập vào mẫu mẫu mẫu và sau đó hoàn toàn đặt lại

49
00:04:27,030 --> 00:04:34,200
nó, do đó biểu mẫu chính nó được đặt lại về giá trị nguyên sơ của nó.

50
00:04:34,200 --> 00:04:38,710
Vì vậy, đây là một bước bổ sung mà chúng ta cần phải làm để đảm bảo rằng các hình thức được

51
00:04:38,710 --> 00:04:43,470
đặt lại hoàn toàn về giá trị ban đầu của nó ở đây.

52
00:04:43,470 --> 00:04:50,268
Bây giờ đã thực hiện điều đó trong phương pháp onSubject, sau khi chúng tôi thiết lập lại

53
00:04:53,241 --> 00:04:58,669
đối tượng FeedbackForm chính nó ở đây, chúng tôi cũng cần phải thêm vào

54
00:04:58,669 --> 00:05:06,242
này.FeedbackFormDirective.ResetForm ();

55
00:05:08,355 --> 00:05:10,060
Trong đó.

56
00:05:10,060 --> 00:05:15,045
Vì vậy, điều này sẽ đảm bảo rằng FeedbackForm của tôi được đặt lại hoàn toàn về

57
00:05:15,045 --> 00:05:18,400
giá trị nguyên sơ của nó tại thời điểm này.

58
00:05:18,400 --> 00:05:23,273
Vì vậy, sau khi những thay đổi này chúng ta hãy đi đến

59
00:05:23,273 --> 00:05:29,050
tập tin mẫu của chúng tôi để hiển thị làm thế nào chúng ta có thể phản ánh những

60
00:05:29,050 --> 00:05:33,630
lỗi này vào mẫu của chúng tôi cho hình thức của chúng tôi ở đó.

61
00:05:33,630 --> 00:05:35,730
Vì vậy, chuyển sang tập tin mẫu.

62
00:05:35,730 --> 00:05:39,490
Vì vậy, đầu tiên, chúng tôi sẽ đi đến nút ở đây, và

63
00:05:39,490 --> 00:05:44,705
sau đó chúng tôi sẽ làm cho nút Vô hiệu hóa.

64
00:05:46,924 --> 00:05:56,470
Nếu “FeedbackForm không hợp lệ”.

65
00:05:56,470 --> 00:06:01,280
Vì vậy, nút sẽ được kích hoạt chỉ khi FeedbackForm là hợp lệ.

66
00:06:01,280 --> 00:06:06,403
Di chuyển đến biểu mẫu đó cho phép tôi thêm

67
00:06:06,403 --> 00:06:15,674
vào <mat-error *NGIF="FeedbackForm.get” get

68
00:06:18,727 --> 00:06:28,727
('firstname') .hasError ('required')

69
00:06:30,484 --> 00:06:31,577
&&

70
00:06:31,577 --> 00:06:40,875
FeedbackForm.get ('firstname')

71
00:06:47,340 --> 00:06:54,588
.touched”, và thông báo là Tên đầu tiên là bắt buộc.

72
00:06:56,040 --> 00:07:01,070
Vì vậy, đó sẽ là thông điệp bạn chỉ định bằng cách sử dụng một dòng duy nhất với ẩn,

73
00:07:01,070 --> 00:07:02,370
với thông tin này ở đó.

74
00:07:04,710 --> 00:07:11,009
Hãy để tôi áp dụng điều tương tự cho họ,

75
00:07:15,328 --> 00:07:20,007
số điện thoại, và email.

76
00:07:20,007 --> 00:07:25,736
Vì vậy, tôi chỉ đi để sao chép, và dán, và chỉnh sửa chúng,

77
00:07:25,736 --> 00:07:32,226
vì vậy bạn có thể tiến hành trước với những, và ('họ').

78
00:07:36,243 --> 00:07:38,472
Họ.

79
00:07:38,472 --> 00:07:39,714
Telnum.

80
00:07:39,714 --> 00:07:46,424
Vì vậy, tôi áp dụng điều đó cho ('telnum').

81
00:07:50,395 --> 00:07:53,948
Một lần nữa, cùng một ý tưởng đằng sau đó và sau đó cũng để email.

82
00:08:01,227 --> 00:08:01,970
( 'email').

83
00:08:05,976 --> 00:08:10,561
Hãy thêm vào biến mẫu được gọi là fform vào biểu mẫu.

84
00:08:10,561 --> 00:08:16,460
Vì vậy, tôi gõ #fform ="NGForm”.

85
00:08:16,460 --> 00:08:22,187
Đi đến biểu mẫu của chúng tôi trong trình duyệt, hãy để tôi gõ vào tên đầu tiên,

86
00:08:22,187 --> 00:08:28,240
và bạn thấy rằng ngay cả khi tôi xóa giá trị sẽ vẫn còn màu xanh lá cây,

87
00:08:28,240 --> 00:08:31,501
bởi vì chúng tôi đã sử dụng chạm vào đó.

88
00:08:31,501 --> 00:08:36,522
Nhưng thời điểm tôi di chuyển ra khỏi nó sau đó bạn

89
00:08:36,522 --> 00:08:42,586
sẽ có thể thấy rằng nó trở thành một màu đỏ.

90
00:08:42,586 --> 00:08:47,659
Vì vậy, tương tự cho họ họ, bạn sẽ thấy rằng khi tôi

91
00:08:47,659 --> 00:08:54,020
loại bỏ giá trị họ, sau đó đó được hiển thị ở đó tương tự.

92
00:08:54,020 --> 00:08:57,710
Hãy để tôi gõ vào tên và họ, và cho email cũng.

93
00:08:59,736 --> 00:09:07,411
các, Trường hợp tương tự cho số điện thoại cũng.

94
00:09:07,411 --> 00:09:12,287
Vì vậy, như thế này, bạn có thể làm xác nhận hình thức trong ứng dụng của chúng tôi.

95
00:09:12,287 --> 00:09:16,943
Với điều này, chúng tôi hoàn thành bài tập này mà chúng tôi đã

96
00:09:16,943 --> 00:09:21,285
thêm vào trong xác nhận hình thức cho hình thức phản ứng của chúng tôi.

97
00:09:21,285 --> 00:09:26,493
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp,

98
00:09:26,493 --> 00:09:28,750
phản ứng tạo thành phần hai.

99
00:09:28,750 --> 00:09:34,925
[ NHẠC]