Trong bài hôm nay chúng ta sẽ cùng nhau tìm hiểu về Form trong AngularJs. Sau đó thông qua bài thực hành chúng ta sẽ thử tạo một form mẫu, trên form này chúng ta sẽ kiểm tra giá trị hợp lệ các field (form validation) bằng Angularjs. Sau khi dữ liệu trên form đã được validate một cách ok, thì ta sẽ cho phép pass các dữ liệu này vào Model của AngulaJs để xử lý.

1. Giới thiệu về Form trong AngularJs

Thông thường, trong bất kì một ứng dụng website nào chúng ta cũng sẽ có một hoặc nhiều form để người dùng điền thông tin, và ta sẽ kiểm tra hợp lệ các giá trị mà người dùng nhập vào và lưu dữ liệu đó xuống database hoặc dùng những thông tin đó vào một mục đích nào đó. Các form phổ biến thường dùng trên trang như là : Form đăng ký, form đăng nhập, form contact,…

Trong AngularJs, chúng ta sẽ tạo form bằng thẻ <form>. Bên trong thẻ form sẽ là các phần từ (element) HTML như textbox, button, checkbox,… Mỗi phần từ này chúng ta sẽ gán ng-model cho chúng để tiện trong việc lấy dữ liệu bởi Angularjs. Đồng thời validate dữ liệu người dùng nhập vào, nếu pass sẽ chuyển các thông tin đã chọn lọc vào lớp  Model bên trong AngulaJs để xử lý.

2. Tạo form AngularJs

a) Yêu cầu :

Mình sẽ tạo 1 form với các field cần phải được kiểm tra như sau :

  • Ô Name bắt buộc nhập
  • Ô Username không bắt buộc nhập nhưng có min length phải là 3 ký từ và max length là 8 ký tự
  • Ô Email không bắt buộc, nhưng nếu nhập thì phải đúng định dạng
  • Nếu các điều kiện validate không thỏa, thì sẽ khóa chức năng submit của Form
  • Nếu thỏa các điều kiện validate, sẽ hiện ra thông báo là thành công

b) Các đối tượng validate có sẵn của AngularJs

Để có thể kiểm tra dữ liệu đầu vào (validate data), AngularJs đã cung cấp cho chúng ta một số đối tượng cần thiết để làm điều này trên Form.

Các bạn xem bảng dưới đây để hiểu rõ hơn :

Đối tượng Lớp Mô tả
$valid ng-valid Kiểu boolean. Đối tượng này nói cho chúng ta biết là có một item nào đó trong form đã thỏa điều kiện (valid ok)
$invalid ng-invalid Kiểu boolean. Đối tượng này nói cho chúng ta biết là có một item nào đó trong form không thỏa điều kiện (valid fail)
$pristine ng-pristine Kiểu boolean  trả về True nếu form của chúng ta vẫn chưa được sử dụng (load lần đầu tiên)
$dirty ng-dirty Kiểu boolean trả về True nếu form của chúng ta đã được sử dụng
$touched ng-touched Kiểu boolean trả về True nếu có bất kì một input trong form sử dụng thuộc tính blur

c ) Thiết kế Form trong AngularJs

Ok, giờ mình sẽ thiết kế một form AngularJs theo như đúng yêu cầu ở mục a) như sau. Các bạn tạo 1 file đặt là form_angularjs.html có nội dung như dưới đây :

Giải thích :

Đoạn code trên chúng ta có AngularJs app là validationApp và controller là mainController.

Trong form  gồm có 3 field là Name, Username, Email :

  • Name được gắn thuộc tính ng-model=”name”, thuộc tính required đảm bảo field này bắt buộc nhập vào. Bên dưới Name ta có thẻ <p> the này có nhiệm vụ hiển thị thông báo khi field Name không thỏa điều kiện và Form đã được sử dụng
  • Username được gắn thuộc tính ng-model = “username”, ng-minlenth = “3” và ng-maxlength=”8″ đảm bảo field này có độ dài tối thiểu là 3 và tối đa là 8 ký tự. Bên dưới field Username thẻ <p> sẽ làm nhiệm vụ thông báo khi Username không thỏa điều kiện minlength và maxlength
  • Email được gắn thuộc tính ng-model = “email”. Bên dưới Email thẻ <p> sẽ làm nhiệm vụ thông báo khi Email không thỏa điều kiện email hợp lệ
  • Button submit. Khi button này được nhấn sẽ gọi hàm submitForm

Khi chạy file html trên chúng ta có giao diện “cùi chuối” như sau (P/s mình chưa CSS cho nó, nếu bạn nào thích thì CSS lại cho nó đẹp :v)

form trong angularjs
Form trong Angularjs

d. Tạo file app.js

Trong file này nội dung chỉ đơn giản là khi form submit, chúng ta sẽ kiểm tra biên isValid có thỏa hay không, nếu thỏa thì sẽ xuất ra thông báo “Form Validation thành công”. Nội dung file này như sau :

Save tất cả lại, nhập thông tin vào các field hoặc bỏ trống 1 vài field theo các điều kiện ở trên và xem kết quả nhé.

form trong angularjs 1
form validation trong angularjs

Vậy là chúng ta đã kết thúc phần tìm hiểu Form trong Angularjs và cách sử dụng Form trong AngularJs như thế nào. Nếu bạn có góp ý, thắc mắc để lại comment bên dưới, và đừng quên Đăng ký nhận bai viết mới bên thanh sidebar bên trái đề cập nhật các bài viết mới thường xuyên.

Cám ơn và chúc các bạn học tốt. Thân.

Nguồn : kungfuphp.com


Nếu bạn thấy bài viết có ích và muốn cảm ơn mình thì bạn có thể donate mời mình 1 lý cà phê nhé
Địa chỉ ví BTC của mình : 1NWVkBYnd5iSZ5BsAg4fbr4bYWC7hn9Vcz
Cám ơn và chúc bạn nhiều niềm vui trong cuộc sống !