Bây giờ chúng ta đã tìm hiểu về
hỗ trợ xác nhận mẫu theo hướng mẫu trong Angular trong bài giảng trước đó, chúng ta
hãy áp dụng những gì chúng ta đã học được
vào biểu mẫu đăng nhập mà chúng ta đã thiết kế trong bài tập trước đó.
Chúng tôi sẽ thực hiện xác nhận mẫu đơn giản cho mẫu đăng nhập.
Cụ thể, chúng tôi sẽ chỉ định tên người dùng và mật khẩu theo yêu cầu,
và sau đó kiểm tra để đảm bảo rằng người dùng nhập thông tin vào các trường này
và có thể hiển thị thông báo lỗi khi các trường trống.
Chúng ta hãy tiến hành sửa đổi này cho ứng dụng trong bài tập này.
Để bắt đầu vào bài tập này, chúng
ta hãy đi đến biểu mẫu đăng nhập ở đây,
mà chúng ta có trong mẫu thành phần đăng nhập ở đây.
Chúng tôi đã thêm vào thuộc tính novalidate vào biểu mẫu đăng nhập.
Vì vậy, chúng ta hãy thêm vào biến mẫu được gọi là LogInform để mẫu này,
và sau đó thiết lập này để NGForm như chúng ta đã hiểu từ bài giảng trước đây ở đây.
Vì vậy, bằng cách làm điều này,
chúng tôi đang xác định rằng biến mẫu này cho phép chúng tôi theo dõi trạng thái của biểu mẫu.
Vì vậy, chúng ta thậm chí có thể kiểm tra trạng thái hợp lệ hoặc không hợp lệ cho biểu mẫu này.
Bây giờ, ngoài ra, đối với mỗi đầu vào này,
chúng tôi cũng sẽ tương tự thêm vào các biến mẫu tương ứng ở đây.
Vì vậy, hãy để tôi đi đến dòng tiếp theo ở đây,
và ở đó tôi sẽ nói tên người dùng là NgModel.
Sau đó, chúng tôi cũng sẽ chỉ định điều này theo yêu cầu ở đây.
Tương tự như vậy, đối với mật khẩu,
chúng ta sẽ thêm vào biến mẫu tương ứng ở đây như mật khẩu là trong NGModel,
và sau đó chỉ định điều này theo yêu cầu ở đây.
Vì vậy, bây giờ mà chúng tôi đã xác định các biến mẫu,
sau đó chúng tôi có thể thực hiện một số kiểm tra xác nhận hình thức ở đây.
Bây giờ, bởi vì chúng tôi đang chỉ định điều này theo yêu cầu,
có nghĩa là nếu
các trường này, các trường đầu vào trống,
sau đó lỗi bắt buộc sẽ được gắn cờ cho điều này.
Tương tự như vậy, bây giờ chúng ta có biến mẫu cho biểu mẫu,
chúng ta có thể dễ dàng sử dụng điều đó để kiểm tra và vô hiệu hóa nút Gửi xuống dưới đây.
Vì vậy, đối với nút Gửi,
những gì chúng tôi làm ở đây là sử dụng
trường bị vô hiệu hóa ở đây,
và sau đó chúng tôi sẽ thiết lập trường bị vô hiệu hóa
để Loginform.form.invalid.
Vì vậy, bằng cách làm điều này,
chúng tôi sẽ vô hiệu hóa nút này khi biểu mẫu không hợp lệ.
Vì vậy, do đó, người dùng thậm chí không thể gửi biểu mẫu khi biểu mẫu chứa mục nhập không hợp lệ.
Vì vậy, ví dụ, nếu tên người dùng trống hoặc mật khẩu trống,
thì biểu mẫu đăng nhập sẽ không hợp lệ,
và do đó người dùng không thể gửi biểu mẫu này.
Bây giờ, đây là một phần của xác nhận hình thức mà chúng ta có thể làm,
theo đó chúng ta có thể ngăn chặn các hình thức từ được gửi.
Ngoài ra, đối với mỗi trường này,
chúng tôi thậm chí có thể hiển thị thông báo lỗi để
chỉ ra loại lỗi nào đang xảy ra trong trường cụ thể này.
Vì vậy, để làm điều này,
với mỗi yếu tố trường hình thức,
chúng ta sẽ thêm vào thẻ mat-error ở đó,
và sau đó chúng ta sẽ nói dừng ngIf,
và chúng ta sẽ nói tên người dùng.error.
Vì vậy, lưu ý rằng chúng tôi đã cung cấp cho mẫu này một biến được gọi là username,
để chúng tôi có thể sử dụng trong username.errors nếu có lỗi và
nếu loại lỗi này là cần thiết.
Vì vậy, nếu lỗi là một loại lỗi yêu cầu gây ra
ở đó, sau đó tại thời điểm đó,
chúng ta có thể xác định rằng lỗi tương ứng được hiển thị là tên người dùng là bắt buộc.
Vì vậy, đó là lỗi sẽ được hiển thị cho lĩnh vực này ở đây.
Tương tự như vậy, hãy để tôi thêm cùng một loại điều cho trường mật khẩu ở đây.
Vì vậy, để tôi sao chép nó và sau đó dán nó vào đây,
và sau đó chúng tôi sẽ nói mật khẩu.error.
Sau đó, thông báo sẽ là mật khẩu là bắt buộc.
Vì vậy, bằng cách thêm điều này,
chúng tôi sẽ hiển thị thông báo lỗi xuống dưới
các trường này khi trường không chứa bất kỳ thông tin.
Chỉnh sửa nhỏ ở đây.
Đó là tên người dùng? errors.required ở đây,
và tương tự, điều này cũng nên là.required ở đây.
Vì vậy, với những sửa đổi này,
thành phần đăng nhập của tôi bây giờ đã sẵn sàng
để thực hiện xác nhận biểu mẫu và sau đó hiển thị thông báo lỗi.
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó đi và xem ứng dụng được cập nhật.
Đi đến ứng dụng của chúng tôi trong trình duyệt,
hãy mở biểu mẫu đăng nhập ở đây.
Vì vậy, bạn có thể thấy rằng bây giờ cả tên người dùng và mật khẩu mang
một ngôi sao ở đó để chỉ ra rằng cả hai đều được yêu cầu.
Vậy, hãy để tôi gõ vào.
Vì vậy, ở đây, bạn thấy rằng biểu mẫu là hợp lệ bởi vì nó chứa thông tin,
và do đó nút Đăng nhập sẽ được kích hoạt.
Hãy để tôi loại bỏ các thông tin từ trường mật khẩu,
và sau đó bạn ngay lập tức nhận thấy rằng
lỗi được chỉ ra ở đây cho biết mật khẩu là bắt buộc.
Cũng lưu ý rằng nút Đăng nhập sẽ không được bật nữa.
Nó sẽ bị vô hiệu hóa. Vì vậy, bạn sẽ không thể gửi biểu mẫu ở đây.
Nhưng thời điểm tôi điền vào một cái gì đó vào mật khẩu,
sau đó nút Đăng nhập sẽ được kích hoạt
và chúng tôi sẽ có thể gửi biểu mẫu ở đây.
Tương tự như vậy cho tên người dùng.
Nếu tôi xóa thông tin tên người dùng ở
đó, sau đó bạn sẽ thấy lỗi đang được hiển thị ở đây,
và bạn cũng sẽ thấy rằng nút Đăng nhập không được kích hoạt tại thời điểm này.
Vì vậy, đó là cách xác nhận biểu mẫu có thể được thực hiện trong trường hợp này.
Vì vậy, như bạn đã thấy,
bằng cách thêm vào xác nhận hình thức đơn giản vào ứng dụng của
chúng tôi, chúng tôi có thể kiểm tra để đảm bảo
rằng các trường chứa thông tin mà họ đang giả sử để chứa,
và ở định dạng phù hợp.
Chúng tôi sẽ kiểm tra nhiều hơn một chút về những gì hình thức xác nhận trong một trong những bài tập sau này,
đặc biệt là đối với các hình thức phản ứng.
Với điều này, chúng tôi hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một cam kết git
với các mẫu tin nhắn theo hướng mẫu, phần hai.