[MUSIC]
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.
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à
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.
Trong bài học này, chúng ta sẽ xem xét hỗ trợ Angular cho các hình thức,
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.
Chúng ta sẽ xem xét sự khác biệt giữa hai, và
nơi mỗi người trong số họ là phù hợp trong ứng dụng Angular của chúng tôi.
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
chi tiết hơn trong bài học này và bài học tiếp theo.
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,
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
trong bài giảng tiếp theo, sau bài tập.
Chúng tôi đã nhận ra rằng các hình thức hỗ trợ một trải
nghiệm nhập dữ liệu gắn kết, hiệu quả và hấp dẫn cho người dùng.
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.
Ví dụ:
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.
Hoặc khi bạn cần gửi thông tin ví dụ.
Nếu bạn đang đặt vé xem phim, hoặc nếu bạn đang đặt một
đơ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
biểu mẫu được sử dụng rộng rãi để cung cấp một cách toàn diện cho
người dùng để nhập thông tin vào các trang web hoặc ứng dụng web.
Khung Angular cung cấp hỗ trợ toàn diện cho
các biểu mẫu, bao gồm các biểu mẫu và biểu mẫu xác thực.
Đây là nơi chúng tôi tận dụng lợi thế của hỗ trợ Angular cho các
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.
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,
dữ liệu được tự động đánh giá với hỗ trợ Angular cho biểu mẫu.
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.
Hãy để tôi nhanh chóng nhắc nhở bạn về các hình thức HTML mình.
Bạn đã biết rằng các biểu mẫu được hỗ trợ thông qua các
yếu tố biểu mẫu trong trang HTML của bạn.
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ứ
như , , và s, và nhiều thứ khác.
Chúng ta sẽ thấy cách hỗ trợ Angular thực hiện cùng với các
yếu tố HTML form, cho phép chúng ta thiết kế hai loại khác nhau của form,
template driven form và cũng phản ứng form trong Angular.
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.
Trong một hình thức định hướng mẫu, họ sẽ sử dụng mẫu Angular cùng với
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à
tận dụng hỗ trợ Angular cho các hình thức định hướng mẫu.
Và chúng ta sẽ có thể liên kết các chỉ thị cụ thể dạng Angular với các
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
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.
Trong bài tập tiếp theo ngay lập tức,
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.
Đặ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
Angular hỗ trợ, sử dụng chỉ thị NGModel có thể được tận dụng
để 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.
Trong bài tập ngay lập tức sau bài giảng này,
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.
Đặ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
chỉ thị NGModel có thể được tận dụng
để 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.
Và đây là nơi chuối trong một cái hộp mà chúng tôi đã đề cập
trước đó với chỉ thị NgModel đến với sự trợ giúp của chúng tôi.
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.
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
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.
[ NHẠC]