Với một sự hiểu biết ngắn gọn về các hình thức phản ứng góc,
chúng ta hãy tiến hành bài tập tiếp theo.
Trong bài tập này, chúng ta sẽ xây dựng
một dạng phản ứng góc trong ứng dụng Angular mà chúng ta đã làm việc cho đến nay.
Trên đường đi, chúng tôi sẽ củng cố sự hiểu biết của chúng tôi về các hình thức phản ứng góc.
Để bắt đầu bài tập,
bước đầu tiên mà chúng ta cần làm là nhập mô-đun
Angular Reactive Forms vào mô-đun ứng dụng của chúng tôi.
Vì vậy, chúng ta hãy đi đến mô-đun ứng dụng,
và sau đó chúng ta thấy rằng chúng ta đã nhập các mô-đun biểu mẫu trước đó.
Chúng tôi cũng sẽ nhập mô-đun Angular Reactive Forms.
Vì vậy, tôi sẽ sao chép điều đó, dán ở đây,
và sau đó thay đổi điều đó vào mô-đun Angular Reactive Forms.
Sau khi chúng tôi làm điều đó, chúng tôi cũng cần phải bao gồm điều đó vào trang trí của chúng tôi.
Vì vậy, đi xuống trang trí ở đây,
tôi sẽ nhập mô-đun biểu mẫu phản ứng trong trang trí.
Hai mô-đun khác mà chúng ta cần nhập khẩu cho
hình thức của chúng tôi là MatSelectModule, và MatslideToggleModule.
Các mô-đun chọn cho phép chúng tôi sử dụng các yếu tố chọn,
và SlideToggle cho phép chúng tôi sử dụng chuyển đổi slide trong hình thức của chúng tôi.
Vì vậy, để làm điều đó, chúng tôi sẽ gõ
nhập MatSelectModule từ góc độ/vật liệu/chọn,
và nhập MatslideToggleModule từ góc độ/vật liệu/trượt chuyển đổi,
và sau đó chúng ta cần phải thêm chúng vào trang trí NGModel của chúng tôi trong nhập khẩu.
Vì vậy, đi xuống đó,
hãy để tôi nhập MatSelectModule và MatslideToggleModule trong đó.
Vì vậy, với những thay đổi này,
mô-đun ứng dụng của chúng tôi bây giờ đã sẵn sàng để cho phép chúng tôi
sử dụng mô-đun biểu mẫu phản ứng trong ứng dụng của chúng tôi.
Trong bước tiếp theo,
những gì tôi sẽ làm là tạo ra một lớp học ở đây được gọi là Phản hồi.
Vì vậy, tôi sẽ tạo nó trong thư mục được chia sẻ trong tập tin phản hồi.
Bây giờ, đây là cấu trúc của lớp đại diện cho mô
hình dữ liệu tương ứng với mô hình hình thức mà chúng ta sẽ
sử dụng trong ứng dụng Angular của chúng tôi.
Vì vậy, tôi tạo ra các lớp có tên phản hồi.
Trong lớp phản hồi,
tôi sẽ bao gồm một vài thuộc tính;
tên, họ,
sau đó số điện thoại, Telnum, email,
sau đó tôi đồng ý đó là một biến Boolean,
thuộc tính Boolean, contacttype đó là của chuỗi loại.
Nó sẽ trở nên rõ ràng hơn với bạn tại sao tôi bao gồm tất cả
những điều này khi chúng ta nhìn vào thiết kế hình thức chính nó.
Lớp phản hồi đặc biệt này tương ứng với phản hồi mà
người dùng có thể gửi về nhà hàng của chúng tôi trong ứng dụng Angular của chúng tôi.
Vì vậy, đó là lý do tại sao tôi tạo ra lớp Phản hồi này.
Chúng tôi sẽ ánh xạ này vào mô hình hình thức trong
một trong những thành phần có và cũng cùng với đó,
Tôi sẽ xuất một hằng số đó là một chuỗi mảng gọi là
contacttype mà như tôi
đã đề cập là một chuỗi mảng chứa ba chuỗi ở đây,
không, Tel, và email.
Vì vậy, bây giờ cấu trúc mô hình dữ liệu của chúng tôi đã sẵn sàng.
Vì vậy, sau đó khi chúng tôi phát triển phía máy chủ của
chúng tôi, chúng tôi sẽ có thể bản đồ này thành một dữ liệu mà chúng tôi lưu trữ ở phía máy chủ.
Vì vậy, trong ứng dụng Angular của chúng tôi,
điều này tạo thành mô hình dữ liệu mà chúng tôi sẽ sử dụng cho ứng dụng của chúng tôi giống như các món ăn,
các nhà lãnh đạo, và khuyến mãi mà chúng tôi đã phát triển này là một lớp mà cho
phép chúng tôi nhóm lại với nhau một tập hợp các thuộc tính thành một lớp ở đây.
Vì vậy, một khi chúng tôi đã hoàn thành điều đó, chúng
ta hãy tiếp tục với việc tạo ra biểu mẫu phản ứng.
Chúng ta sẽ tạo ra biểu mẫu phản ứng trong thành phần liên lạc của chúng ta.
Vì vậy, chúng ta hãy đi đến các tập tin thành phần liên hệ,
và chúng ta cũng sẽ bao gồm
các hình thức tương ứng trong tập tin mẫu thành phần liên hệ.
Vì vậy, trong các thành phần liên hệ loại tập tin kịch bản,
vì vậy đây là nơi chúng tôi sẽ chuẩn bị hình thức của
chúng tôi như chúng ta thấy biểu mẫu phản ứng được xây dựng chủ yếu
trong mã và sau đó ánh xạ vào các yếu tố hình thức trong tập tin mẫu.
Vì vậy, ở đây tôi sẽ nhập một vài lớp học.
Tôi sẽ nhập FormBuilder,
sau đó FormBuilder, và validators.
Validators sẽ được sử dụng để xác nhận biểu mẫu sẽ có trong bài tập tiếp theo,
nhưng tôi sẽ nhập chúng vào lúc này.
Chúng được nhập khẩu từ thư viện hình thức Angular.
Vì vậy, một khi chúng tôi nhập khẩu này,
chúng tôi sẽ nhập các lớp phản hồi và liên lạc hằng số
từ tập tin chia sẻ/phản hồi
mà chúng tôi vừa tạo ra trong bước trước.
Chúng tôi cần điều này trong ứng dụng của chúng tôi.
Bây giờ, bên trong lớp của tôi ở đây,
tôi sẽ khai báo một vài biến được gọi là FeedbackForm đó là loại FormGroup.
Đây là mô hình hình thức đó là sẽ lưu trữ
các hình thức phản ứng ở đây và sau đó tôi cũng sẽ
tuyên bố một phản hồi biến của các loại phản hồi,
vì vậy đây sẽ là mô hình dữ liệu tương ứng.
Sau này giá trị phản hồi này có thể được lấy từ một máy chủ trong ứng dụng của chúng
tôi, và sau đó tôi cũng sẽ khai báo contacttype như một biến
đó là của mảng chuỗi contacttype.
Bởi vì tôi cần phải sử dụng nó trong ứng dụng của chúng tôi.
Để xây dựng biểu mẫu phản ứng trong constructor,
tôi sẽ tiêm FormBuilder vào constructor ở đây,
và tôi sẽ tạo ra một phương pháp riêng biệt được gọi là
CreateForm mà tôi sẽ gọi trong constructor,
vì vậy khi lớp này được xây dựng hình thức sẽ được tạo ra.
Vì vậy, CreateForm sẽ là một phương pháp trong đó tôi sẽ tạo ra các hình thức thực tế.
Vì vậy, hãy để tôi thêm vào phương pháp CreateForm ở đây.
Đây chỉ là thuận tiện tôi có thể chỉ đơn giản là
bao gồm các mã trực tiếp trong các constructor riêng của mình,
nhưng bạn sẽ thấy rằng có thể có lý do tại sao bạn có
thể cần phải gọi CreateForm này từ các vị trí khác.
Vì vậy, tốt hơn là đưa nó vào một phương pháp riêng biệt ở đây.
Vì vậy, tôi sẽ tạo ra các hình thức ở đây, biểu mẫu phản ứng,
và sau đó đặt nó vào biến FeedbackForm mà tôi đã tuyên bố trước đó.
Vì vậy, để tạo ra các hình thức,
tôi sẽ có sự giúp đỡ của FormBuilder,
FB mà tôi đã tuyên bố tại nhà xây dựng,
và sau đó FB cung cấp một phương pháp gọi là Nhóm cho phép tôi
xác định một nhóm, một FormGroup ở đây.
Vì vậy, trong đó, bây giờ tôi sẽ xây dựng các phần của hình thức ở đó.
Vì vậy, trong nhóm này,
bây giờ tôi có thể bao gồm các điều khiển biểu mẫu khác nhau ở đó.
Vì vậy, trước tiên tôi sẽ đặt tên,
sau đó họ.
Lưu ý cách các trường trong biểu mẫu của tôi
phản ánh chặt chẽ các trường trong lớp phản hồi của tôi.
Chúng không phải khớp chính xác, nhưng nếu chúng khớp,
thì việc truyền dữ liệu giữa mô
hình dữ liệu và bốn mô hình trở nên đơn giản hơn rất nhiều.
Telnum mà tôi sẽ rời đi vì...
tôi đã thêm tên, họ,
Telnum, email, và đồng ý, và loại liên lạc,
mà tôi sẽ đặt là không có để bắt đầu với.
Nhớ lại rằng kiểu liên lạc là một mảng chuỗi chứa ba trong số chúng,
vì vậy bạn nên chọn một trong số chúng và sau đó ánh xạ nó vào thuộc tính này ở đây.
Vì vậy, tôi sẽ chọn điều này như không có và sau đó tin nhắn,
đó sẽ là phản hồi mà người dùng đưa ra về
nhà hàng của chúng tôi được ánh xạ vào một chuỗi ở đây.
Vì vậy, đây là những lĩnh vực khác nhau mà sẽ tạo thành một phần của hình thức của chúng tôi ở đây.
Vì vậy, một khi chúng ta có cấu trúc của hình thức tại chỗ ở đây,
vì vậy bạn nhận thấy rằng khi phương
thức này được gọi, hình thức này sẽ là hình thức phản ứng sẽ được tạo ra trong mã ở đây.
Bây giờ, chúng ta cần phải ánh xạ điều này vào khung nhìn,
vào mẫu ở đó.
Vì vậy, chúng ta sẽ làm điều đó trong bước tiếp theo.
Vì vậy, bây giờ, đi đến tập tin mẫu của chúng tôi,
trong tập tin mẫu thành phần liên hệ,
chúng tôi sẽ di chuyển xuống và sau đó bao gồm điều này vào
tập tin mẫu của chúng tôi ngay sau khi div này ở đây,
vì vậy chúng tôi có div này trong quan điểm liên hệ của chúng tôi có chứa thông tin vị trí và vân vân.
Ngay sau đó, tôi sẽ tạo ra một div bên trong
mà chúng tôi sẽ lưu trữ các hình thức phản ứng ở đó.
Hãy để tôi áp dụng một vài điều bố trí flex
ở đây để div của tôi.
Bây giờ, kích thước hình thức này như bạn có thể thấy nên
là một lớp CSS mà tôi sẽ tạo ra một chút sau đó.
Bên trong div này, tôi sẽ lưu trữ hình thức của tôi.
Vì vậy, một khi tôi đặt div này vào tập tin mẫu của tôi,
bây giờ cho phép tôi bắt đầu với một tiêu đề cho điều này.
Vì vậy, chúng tôi sẽ nói, “Gửi phản hồi của bạn cho chúng tôi.”
Vì vậy, bạn đang tìm kiếm phản hồi từ khách truy cập vào trang web của bạn.
Chúng ta sẽ bắt đầu xây dựng các hình thức.
Vì vậy, hãy để tôi bắt đầu với thẻ hình thức
ở đây và sau đó chúng tôi sẽ xây dựng ra các hình thức bên trong thẻ hình thức này ở đây.
Vì vậy, đối với các hình thức, điều đầu tiên mà tôi sẽ làm là áp dụng
không xác nhận bởi vì xác nhận sẽ được chăm sóc bởi góc cạnh,
và sau đó cũng áp dụng một nhóm hình thức ở đây.
Vì vậy, lưu ý rằng nhóm hình thức này là một trong đó sẽ buộc tôi vào mô hình hình thức phản ứng
mà tôi đã tạo ra trong mã của tôi ở đây.
Vì vậy, bằng cách làm điều này,
chúng tôi đang buộc trong hình thức phản ứng này trong mẫu để
mô hình hình thức tương ứng trong tập tin typescript của chúng tôi ở đó.
Vì vậy, cách chúng tôi làm điều đó là chúng tôi tuyên bố nhóm hình thức và hình thức phản hồi.
Tôi sẽ chỉ cho bạn cách bạn buộc trong
các yếu tố biểu mẫu còn lại với
các thuộc tính tương ứng trong mô hình biểu mẫu trong một thời gian ngắn.
Vì vậy, sau khi chúng tôi làm điều này, chúng ta
hãy đặt trong các yếu tố hình thức của chúng tôi vào vị trí bên trong mô hình hình thức này.
Vì vậy, tôi sẽ khai báo một P xung quanh đây và sau đó bên trong đó tôi
sẽ sử dụng mat-form-field ở đây,
mà tôi sẽ áp dụng một lớp CSS gọi là Half-width,
và đóng này đi.
Vì vậy, điều này sẽ đưa điều khiển hình thức đầu tiên của tôi vào vị trí ở đây.
Vì vậy, ở đây, tôi sẽ đặt đầu vào và sau đó áp dụng MatinPut từ vật liệu góc cạnh ở đây.
Để buộc này vào tài sản bên trong mô hình biểu mẫu của
tôi, tôi sẽ cần phải làm FormControlName,
và cái đầu tiên là tên đầu tiên.
Vì vậy, bằng cách đó, đầu vào này bây giờ được gắn vào thuộc tính tên đầu tiên
mà tôi đã xác định bên trong mô hình mẫu của tôi mà tôi đã xác định trong mã.
Tên đầu tiên, và sau đó tôi sẽ xác
định giữ chỗ là tên đầu tiên.
Vì vậy, như bạn mong đợi,
trường đầu vào này sẽ được sử dụng để nhập
tên đầu tiên của người dùng, nhập văn bản.
Thật thú vị, bạn thấy rằng chúng tôi không có ng-model ở đây
hoặc bất kỳ biến mẫu và như vậy trong hình thức của tôi nữa.
Các dạng phản ứng hoạt động khác nhau.
Vì vậy, như bạn thấy trong biểu mẫu phản ứng,
bạn ánh xạ nhóm biểu mẫu và sau đó bạn thử tên điều khiển biểu mẫu.
Nếu bạn đang tạo điều khiển biểu mẫu với lớp điều khiển biểu mẫu,
bạn sẽ khai báo điều này như là điều khiển biểu mẫu trong dấu ngoặc vuông và sau
đó phù hợp với điều khiển biểu mẫu tương ứng mà bạn tạo trong kiểu hoài nghi của bạn.
Nhưng bây giờ vì chúng tôi đang sử dụng trình tạo biểu mẫu,
tôi chỉ cần buộc trong nhóm biểu mẫu như thế
này trong biểu mẫu của tôi với mô hình biểu mẫu tương ứng,
và sau đó phần còn lại của chúng,
tôi khai báo là tên điều khiển biểu mẫu và sau đó kết hợp chúng với
các thuộc tính tương ứng trong mô
hình điều khiển biểu mẫu mà tôi có trong bản đánh máy của tôi theo cách mã.
Vì vậy, điều này sẽ tạo ra trường tên đầu tiên ở đó.
Để tôi sao chép cái này.
Tôi cần họ ở đây.
Vì vậy, tôi sẽ sao chép này và sau đó nói tên điều khiển biểu mẫu là Họ,
và giữ chỗ là Họ,
và các loại văn bản, ở đây.
Tôi có tên,
tôi có họ và nếu bạn nhìn vào mô hình điều khiển biểu mẫu,
bạn sẽ thấy rằng sau khi tên và họ,
tôi có số điện thoại như là một trong những tiếp theo,
vì vậy tôi sẽ dán này vào đây.
Sau đó, tên điều khiển biểu mẫu ở đây là Telnum,
và giữ chỗ là Số điện thoại,
và loại là Tel.
Trong khi chúng tôi đang ở đó,
tôi sẽ buộc trong Bắt buộc vào những mặc dù đó là không thực sự bắt buộc.
Nhưng hãy để tôi nói thêm điều đó trong đó.
Bây giờ, số điện thoại sau đó tôi có email.
Vì vậy, trường tiếp theo là Email
và chỗ dành sẵn là Email
và loại cũng là.
Vì vậy, bây giờ tôi có đầu tiên,
họ, và số điện thoại, và email.
Điều tiếp theo mà tôi sẽ thêm vào là một chuyển đổi slide.
Trước đó chúng tôi sử dụng hộp kiểm.
Các slidetoggle là một điều khiển hình thức khác mà vật liệu góc cung cấp,
đó là hơi khác so với hộp kiểm và
tôi nghĩ rằng tôi sẽ minh họa với bạn bằng cách sử dụng nó trong các hình thức ở đây.
Bây giờ, đây là nơi tôi sẽ sử dụng một bảng để định vị các yếu tố này.
Lý do là, các
yếu tố này rất khó để định vị mà không cần sử dụng một bảng.
Vì vậy, bên trong bảng,
tôi chắc chắn tất cả các bạn biết làm thế nào để sử dụng bảng,
tôi đã cố gắng để định vị chúng bằng cách sử dụng
bố trí flex tiêu chuẩn và không phải là rất thành công với điều đó.
Vì vậy, thay vào đó tôi sử dụng một bảng để định vị hai mục này trong hình thức của tôi.
Vì vậy, mat-slide-toggle.
Vì vậy, slidetoggle giống như hộp kiểm,
bạn có thể bật và tắt nó,
và điều này được phép chọn một giá trị Boolean ở đây.
Vì vậy, slidetoggle và FormControlName là đồng ý.
Nếu bạn nhớ, chúng tôi đã đồng ý,
đó là một tài sản Boolean trong điều khiển biểu mẫu.
Sau đó, vì điều này, tôi sẽ nói,
chúng tôi có thể liên lạc với bạn không?
Bây giờ, nó sẽ trở nên rõ ràng hơn với bạn khi bạn thấy phiên bản cuối cùng của
biểu mẫu này để hiểu tại sao chúng tôi làm điều này.
Ngay bây giờ, chúng ta sẽ đưa tất cả các bộ phận vào dạng phản ứng của tôi ở đây.
Phần thứ hai tôi sẽ sử dụng một chọn,
được hỗ trợ thông qua các thành phần mat-select trong vật liệu góc.
Vì vậy, MD chọn và cho này giữ chỗ,
tôi sẽ xác định là “Làm thế nào?” ,
và FormControlName mà tôi sẽ buộc này là
“contacttype” và đóng MD chọn.
Vì vậy, điều này cho phép tôi tạo ra một phần tử select trong hình thức của tôi.
Vì vậy, các yếu tố chọn là một cái gì đó cung cấp cho tôi
một danh sách kéo xuống mà từ đó tôi có thể chọn một trong số họ.
Vì vậy, để tạo danh sách kéo xuống,
tôi sẽ sử dụng mat-tùy chọn có sẵn như là một thành phần trong vật liệu góc cạnh.
Vì vậy, tùy chọn mat-được bao gồm bên trong mat-select.
Vì vậy, đối với các tùy chọn,
tôi sẽ làm *NGFor,
và tôi chắc chắn bạn nhớ chỉ thị NGFor từ trước đó,
*NGFor “Hãy để ctype của ContactType.”
Bây giờ, bạn thấy lý do tại sao tôi tuyên bố biến kiểu liên lạc
trong mã của tôi trước đó và sau đó tôi sẽ nói, [value] = “ctype.”
Vì vậy, tôi đang thiết lập tùy chọn của tôi trong lựa chọn của tôi ở đây và sử dụng nội suy,
tôi sẽ gõ ctype ở đây.
Vì vậy, điều đó sẽ cung cấp cho tôi một menu tùy chọn kéo xuống trong hình thức của tôi ở đó.
Vì vậy, đó là phần tiếp theo và sau đó cuối cùng,
sau khi bảng, tôi sẽ đặt trong một khu vực văn bản ở đây.
Vì vậy, tôi sẽ nói p và đóng lại P. để tạo kiểu mẫu phản ứng,
phần tử P cho phép tôi định vị các mục đúng cách.
Vì vậy, đó là lý do tại sao tôi sử dụng nó.
Vì vậy, như bạn nhớ lại,
mat-form-field cho phép tôi
bao gồm một container đầu vào ở đây và sau đó bên trong đó tôi sẽ xác định một khu vực văn bản,
mà tôi áp dụng
chỉ thị MatinPut cho rằng.
Sau đó, FormControlName, tôi sẽ cung cấp cho là “tin nhắn”.
Vì vậy, yếu tố hình thức cụ thể này cho phép người dùng gõ
vào thông báo phản hồi cho nhà hàng của tôi.
Vì vậy, giữ chỗ “Phản hồi của bạn”,
và sau đó tôi sẽ cung cấp cho khu vực văn bản một kích thước của
12 hàng ở đây và sau đó đóng cửa khu vực văn bản.
Vì vậy, ở đây chúng tôi có một khu vực văn bản với 12 hàng.
Vì vậy, điều đó hoàn thành hầu hết các hình thức.
Xin lỗi, cái này phải ở ngoài bàn.
Chúng tôi cần một nút để gửi biểu mẫu.
Vì vậy, ngay tại đó, tôi sẽ bao gồm một nút của type="submit” và
nút gửi này tôi sẽ áp dụng nút
mat-button và cũng áp dụng class="background-primary”.
Bạn đã thấy tôi áp dụng này vào nút trong bài tập trước đó cũng,
loại nút tương tự.
Vì vậy, bây giờ hình thức của tôi đã gần như sẵn sàng.
Bạn có thể thêm vào một vài lớp CSS vào thành phần liên hệ.
Ba lớp mà tôi đã sử dụng là full-width,
điều này được sử dụng để thiết lập kích thước của các yếu tố ở đó.
Vì vậy, toàn chiều rộng 95 phần trăm, nửa chiều rộng.
Vì vậy, điều này cho phép tôi kích thước các yếu tố một cách chính xác,
45 phần trăm nửa chiều rộng và sau đó hình thức kích thước.
Vì vậy, tôi sử dụng các lớp CSS trong hình thức của tôi.
Vì vậy, với điều này, chúng ta hãy lưu các thay đổi,
và xem nhanh vào biểu mẫu trong ứng dụng của chúng tôi.
Đi đến trình duyệt,
trong chế độ xem liên hệ,
khi bạn cuộn xuống, bây giờ bạn thấy biểu mẫu tại chỗ trong chế độ xem liên hệ ở đây.
Vì vậy, bạn thấy gửi cho chúng tôi phản hồi của bạn
, tên, họ, số điện thoại,
email và chuyển đổi slide ở đây,
vì vậy bạn thấy chuyển đổi slide tại chỗ ở đó và sau đó đây là chọn này.
Lựa chọn cho phép tôi chọn một trong ba cái này.
Giá trị mặc định là không có và sau đó là khu vực văn bản ở đây,
cho phép tôi gõ vào ý kiến phản hồi của tôi ở đây và sau đó là nút gửi.
Vì vậy, điều này hoàn thành biểu mẫu phản ứng trong
ứng dụng của tôi nhưng khi bạn nhấp vào nút Gửi,
bạn sẽ không thể gửi biểu mẫu này.
Vì vậy, chúng ta cần phải thêm NGSubmit vào biểu mẫu của chúng tôi trong mẫu
và sau đó thêm một phương thức trong tập tin script kiểu của chúng tôi.
Đi đến mã của chúng tôi,
để các hình thức ở đây,
cùng với các hình thức novalidFormGroup,
Tôi sẽ thêm vào một NGSubmit để các hình thức.
Tôi sẽ gọi phương pháp như onSubmit phương pháp.
Vì vậy, với điều này, mẫu của tôi bây giờ đã sẵn sàng để gửi thông tin.
Tôi cần phải đi vào các thành phần liên lạc,
gõ tập tin kịch bản và sau đó tạo ra phương pháp onSubmit ở đây.
Vì vậy, trong phương pháp onSubmit,
nó xảy ra rằng mô hình biểu mẫu là chính xác giống như các mô hình dữ liệu,
vì vậy tôi chỉ có thể lấy giá trị của mô hình biểu mẫu.
Vì vậy, khi bạn có một mô hình biểu mẫu như mẫu phản hồi này,
mẫu phản hồi cho một thuộc tính được gọi là giá trị,
cho phép tôi lấy giá trị hiện tại của tất cả các từ mẫu phản hồi của tôi.
Vì vậy, điều này sẽ tạo thành một đối tượng JavaScript,
mà sau đó tôi có thể bản đồ vào phản hồi đối tượng JavaScript.
Nó xảy ra như vậy, cả hai đều có cấu trúc chính xác giống nhau,
mô hình dữ liệu và mô hình biểu mẫu.
Vì vậy, đó là lý do tại sao tôi có thể nhanh chóng tải giá trị
trực tiếp vào mô hình dữ liệu khi người dùng gửi biểu mẫu.
Nếu mô hình dữ liệu của bạn hơi khác với mô hình biểu mẫu,
bạn cần phải ánh xạ trong các thuộc tính riêng lẻ một cách rõ ràng và
có thể được thực hiện bên trong phương pháp này ở đó.
Chỉ để cho bạn thấy rằng biểu mẫu được gửi một cách chính xác,
tôi sẽ đăng nhập giá trị vào giao diện điều khiển, giao diện điều khiển JavaScript.
Sau đó, tôi sẽ nói, này.Feedbackform.reset.
Phương pháp đặt lại cho phép bạn đặt lại biểu mẫu về trạng thái bình thường của nó,
xóa tất cả các mục mà bạn đã thực hiện trong biểu mẫu.
Vì vậy, một khi người dùng gửi,
bạn thường sẽ nắm bắt các giá trị và sau đó đặt lại biểu mẫu để
đầu vào thêm có thể được thực hiện dưới dạng một biểu mẫu riêng biệt.
Vì vậy, đó là phương pháp thiết lập lại mà chúng tôi sẽ sử dụng ở đây.
Vì vậy, với những thay đổi này, chúng
ta hãy lưu các thay đổi và sau đó đi và xem hình thức của chúng tôi trong hành động.
Một điều nhỏ cuối cùng mà tôi muốn thêm vào mẫu của tôi là để hiển thị cho
bạn các giá trị biểu mẫu bên trong biểu mẫu của tôi,
mặc dù trong một ứng dụng thực sự,
bạn sẽ không làm điều này nhưng tôi chỉ muốn minh họa cho bạn làm thế nào
bạn có thể nhìn thấy các giá trị của FeedbackForm trực tiếp ở đây,
từ Mô hình FeedbackForm.
Vì vậy, tôi có thể làm ở trong này.
Tôi có thể nói Feedbackform.Value và piped qua json để hiển thị ở đây.
Tương tự như vậy, tôi có thể làm ở đây, FeedbackForm.
Có một thuộc tính khác liên kết với mô hình biểu mẫu
đó gọi là trạng thái, cho tôi thấy trạng thái của biểu mẫu tại thời điểm này, cho
dù nó là hợp lệ hay không hợp lệ.
Vì vậy, tôi sẽ thêm hai vào biểu mẫu của tôi ở đây,
do đó điều này sẽ được hiển thị trong mẫu của tôi.
Đây chỉ là để cung cấp cho bạn xem tức thời về những gì mô
hình biểu mẫu chứa trong tập tin kịch bản kiểu của tôi.
Hãy lưu các thay đổi và đi và xem nhanh vào biểu mẫu của chúng tôi.
Quay trở lại trình duyệt của chúng tôi,
bây giờ bạn có thể thấy rằng các giá trị biểu mẫu đang được hiển thị
ở đây và biểu mẫu là ở dạng tốt để cho phép chúng tôi gõ vào các giá trị.
Vì vậy, hãy gõ vào một số giá trị ngẫu nhiên ở đây và bạn có thể
ngay lập tức thấy giá trị đang được phản ánh trong mô hình FeedbackForm ở đó,
ngay ở trên cùng và email.
Không quan trọng, chỉ cần gõ một cái gì đó.
Sau đó, chuyển đổi chuyển đổi này,
bạn có thể thấy rằng khi bạn bật và tắt nó,
đồng ý lần lượt thay đổi từ sai sang đúng.
Vì vậy, hãy để tôi để nó ở đúng và sau đó chọn.
Hãy để tôi chọn email và sau đó bạn thấy rằng loại liên hệ ở đây đã thay đổi thành email.
Vì vậy, đây là cách bạn sẽ chọn để thay đổi giá trị.
Vì vậy, chúng ta hãy nói email và sau đó ở đây,
chúng ta có thể gõ vào tin nhắn.
Một số văn bản ngẫu nhiên ở đây và bạn sẽ
có thể thấy rằng văn bản ngẫu nhiên được phản ánh trong tin nhắn ở đó.
Hãy gửi biểu mẫu.
Vì vậy, khi bạn nhấp vào Gửi bạn ngay lập tức nhìn thấy trong giao diện điều khiển,
giá trị được in ra đây,
trong đối tượng này ở đây.
Vì vậy, bạn có thể duyệt để xem tất cả các thuộc tính cho đối tượng đó,
mô hình mẫu phản hồi.
Vì vậy, đây là một minh họa của một hình thức phản ứng trong ứng dụng của chúng tôi.
Điều này hoàn thành bài tập này.
Trong bài tập này, chúng ta đã thấy làm thế nào chúng ta có thể tạo ra
một hình thức phản ứng trong ứng dụng Angular của chúng tôi.
Đây cũng là một điểm tốt mà tại đó bạn có thể thực hiện một Git cam kết với thông điệp,
phản ứng tạo thành phần một.