Chúng tôi vừa hoàn thành việc học về các hình thức định hướng mẫu Angular và cũng có thể,
trong bài tập, xây dựng hình thức định hướng mẫu đầu tiên của chúng tôi.
Bây giờ, khi người dùng nhập thông tin vào các trường biểu mẫu,
chúng tôi có thể muốn xác nhận dữ liệu mà người dùng nhập vào các trường dữ liệu đó.
Trong những ngày đầu của web,
cách duy nhất để kiểm tra dữ liệu là gửi dữ liệu
qua máy chủ và sau đó thực hiện kiểm tra ở phía máy chủ,
và sau đó nhận được kết quả từ phía máy chủ.
Nhưng những ngày này, với các khuôn khổ phía khách hàng mạnh mẽ như Angular,
rất nhiều xác nhận dữ liệu có thể dễ dàng được thực
hiện ở phía khách hàng và chúng ta có thể dễ dàng bắt được rất nhiều lỗi ở phía khách hàng,
và sau đó thậm chí cung cấp chỉ dẫn cho người dùng về các lỗi.
Bây giờ, đây là nơi chúng ta sẽ xem xét hỗ trợ góc cho
xác nhận biểu mẫu và sau đó làm thế nào chúng ta có thể thực hiện xác nhận biểu mẫu,
và sau đó hiển thị thông báo lỗi cho người dùng trong chế độ xem.
HTML5 đã đi kèm với một số hỗ trợ tích hợp để xác nhận biểu mẫu.
Nhưng khi chúng ta đang sử dụng Angular cho ứng dụng của
chúng tôi, trước tiên chúng ta phải tắt xác nhận biểu mẫu HTML5,
để trách nhiệm thực hiện
xác nhận biểu mẫu được chuyển giao cho ứng dụng Angular.
Vì vậy, để làm điều đó cho các hình thức,
như chúng ta đã thấy trong bài tập trước đó,
chúng ta bao gồm các thuộc tính novalidate vào thẻ hình thức đó,
do đó điều này đảm bảo rằng góc cạnh
sẽ đảm bảo trách nhiệm thực hiện xác nhận hình thức.
Angular giúp chúng tôi thực hiện xác nhận biểu mẫu như thế nào?
Đó là những gì chúng tôi sẽ xem xét chi tiết hơn tiếp theo.
Bất cứ khi nào bạn cần thực hiện xác thực biểu mẫu trong Angular,
đặc biệt là khi bạn cần tham chiếu đến các trường biểu mẫu trong mẫu của bạn,
thì bạn cần sự trợ giúp của các biến tham chiếu mẫu Angular.
Làm thế nào để chúng ta xác định một biến tham chiếu mẫu?
Biến tham chiếu mẫu có thể được xác định cho
bất kỳ phần tử nào bằng cách liên kết một biến mẫu như thế này.
Ví dụ, trong trường hợp này đối với hình thức,
chúng tôi đang chỉ định biểu mẫu đăng nhập bằng NGForm.
Tương tự, ví dụ, đối với một trường nhập liệu,
bạn sẽ nói dấu gạch chéo,
hoặc đúng hơn là #username bằng NgModel.
Trong trường hợp này, biểu mẫu đăng nhập và tên người dùng là tất cả các biến tham chiếu mẫu.
Các biến tham chiếu mẫu này sau đó có thể được sử dụng trong khuôn
mẫu Angular của chúng tôi để tham chiếu đến các trường này.
Vì vậy, trong bản thân mẫu,
bạn có thể kiểm tra các trạng thái điều khiển cho các
trường bao gồm những thứ như trường có hợp lệ hay không, cho
dù đó là bẩn,
hoặc nó có một số lỗi.
Chúng tôi sẽ tận dụng sự hỗ trợ này mà Angular cung cấp để thực hiện xác nhận biểu mẫu.
Như tôi đã đề cập, chúng tôi sẽ tận dụng
các biến tham chiếu mẫu để thu thập trạng thái kiểm soát để kiểm tra thông tin.
Vì vậy, ví dụ, bạn có thể nói username.pristine trong mẫu của bạn.
Vì vậy, điều đó đề cập đến việc kiểm tra trạng thái, cho
dù điều khiển cụ thể là trong trạng thái nguyên sơ,
có nghĩa là nó đã không được xúc động và sửa đổi bởi người dùng cho đến nay.
Dơ bẩn là đối lập với nguyên sơ
, có nghĩa là khi một trường bẩn,
thì điều đó có nghĩa là trường đã bị người dùng sửa đổi trong quá khứ.
Tương tự, trạng thái kiểm soát hợp lệ và không hợp lệ
cho phép chúng tôi kiểm tra xem thông tin trong trường đó có hợp lệ hay không hợp lệ, tùy thuộc vào đặc điểm kỹ thuật kiểm tra của bạn về hiệu lực hoặc trạng thái không hợp lệ của trường cụ thể đó.
Vì vậy, ví dụ, bạn có thể kiểm tra xem bạn đã khai báo một trường theo yêu cầu,
điều đó có nghĩa là bạn mong đợi người dùng
nhập ít nhất một số thông tin vào trường.
Sự vắng mặt của thông tin trong trường trong biểu mẫu của bạn có nghĩa là trường không hợp lệ.
Tương tự, bạn có thể chỉ định đại lục hoặc chiều dài tối đa của một giá trị trường,
để bạn có thể dễ dàng kiểm tra xem số ký tự
trong một trường có khoảng độ dài chính
hay dưới độ dài tối đa, v.v.
Trong bài tập sau đây,
chúng tôi sẽ áp dụng các phương pháp xác nhận hình thức khác nhau cho
hình thức hướng mẫu của chúng tôi mà chúng tôi đã thiết kế trong bài tập trước đó.
Ví dụ, trong biểu mẫu của bạn,
bạn có thể tắt nút gửi bằng cách kiểm tra
xem biểu mẫu đó có ở trạng thái hợp lệ hay không.
Vì vậy, trong trường hợp này, bạn sẽ liên kết người bị vô hiệu hóa
và đặt nó bằng với biểu mẫu đăng nhận.form.invalid,
có nghĩa là khi biểu mẫu không hợp lệ,
nút này sẽ bị vô hiệu hóa trong trường hợp này.
Vì vậy, người dùng sẽ không được phép gửi thông tin thông qua biểu mẫu cụ thể này.
Vì vậy, đây là một cách để đảm bảo rằng các
mục nhập không chính xác sẽ không được gửi bởi người dùng thông qua biểu mẫu.
Tương tự, đối với các trường cụ
thể, bạn có thể kiểm tra xem trường đã được điền hay chưa.
Vì vậy, nếu bạn chỉ định rằng một trường cụ thể được yêu cầu
bằng cách xác định thuộc tính bắt buộc cho trường đầu vào,
sau đó bạn có thể kiểm tra để xem liệu có lỗi của
loại yêu cầu được nêu ra cho phần tử trường cụ thể ở đó hay không.
Vì vậy, trong mã của bạn ví dụ,
bạn thậm chí có thể chỉ định để thông báo cho người dùng về
thực tế là một trường cụ thể là không chính xác.
Anh dùng lỗi mat-error để biểu thị điều đó.
Vì vậy, thẻ mat-error, xuất phát từ,
một lần nữa, hỗ trợ hình thức vật liệu Angular như bạn thấy ở đây,
nếu NGIf hóa ra là đúng,
thì thông báo đó sẽ được hiển thị bên dưới trong trường đầu vào ở đó,
và tương tự
như trường đầu vào, sẽ được đánh dấu là màu đỏ trong màn hình.
Vì vậy, đây là một cái gì đó mà bạn sẽ được kiểm tra và
đảm bảo và cũng cung cấp thông báo lỗi cho người dùng.
Trong bài tập sau đây,
chúng tôi sẽ áp dụng cách tiếp cận này để kiểm tra tên người dùng và mật khẩu.
Chúng tôi sẽ chỉ định rằng các trường này là bắt buộc và nếu người dùng
không nhập bất kỳ thông tin nào vào các trường này sau khi trường đã được chạm vào,
sau đó chúng tôi sẽ đảm bảo rằng thông báo lỗi thích hợp được hiển thị cho người dùng.
Vì vậy, với sự hiểu biết nhanh chóng về xác nhận biểu mẫu trong Angular, chúng ta
hãy chuyển sang bài tập,
nơi chúng ta sẽ kiểm tra cách chúng ta có thể thực hiện xác nhận biểu mẫu đơn giản cho biểu
mẫu đăng nhập của chúng tôi và sau đó có thể hiển thị thông báo lỗi.
Chúng tôi sẽ trở lại để hình thành xác nhận trong một trong những bài tập sau này,
sau khi chúng tôi đã tìm hiểu thêm về hỗ trợ phản ứng trong Angular.