Series AngularJS cho người mới: Filter và Validation

Chào mừng các bạn quay trở lại với Series AngularJS cho người mới.

Một trong những ưu điểm của AngularJS là hỗ trợ developer trong việc validation cũng như filter dữ liệu một cách vô cùng dễ dàng. Nào cùng tìm hiểu xem AngularJS đã giúp developer như thế nào nhé.

Phía trên là form chúng ta đã làm trong lần trước. Một điều quan trong đó là phải kiểm tra dữ liệu trước khi gửi lên server, đó chính là validation, ví dụ cụ thể như email phải đúng format có kí tự “@”, không được bỏ trống, blablabla…

HTML5 hỗ trợ chúng validate dữ liệu bằng type, ví dụ email, url, number, blabla… Dữ liệu bắt buộc bằng thuộc tính required, chúng ta thêm vào form như sau.

Thử không nhập gì và nhấn Gửi. Chúng ta thấy kết quả như thế này.

rsz_s1.png

Chúng ta kiểm tra tình trạng form có hợp lệ hay không bằng cách gọi $valid. Thử xuất ra màn hình như sau.

Nếu kết quả là false, tức là form không hợp lệ và ngược lại.

Bây giờ chúng ta muốn form chỉ có thể được gửi đi hay cụ thể là hàm reviewCtrl.addReview(product) chỉ được chạy khi reviewForm.$validtrue. Vô cùng đơn giản chỉ việc đính kèm điều kiện khi gọi ng-submit như sau.

Phần tiếp theo, Angular hỗ trợ chúng ta một công cụ đắc lực để hiển thị dữ liệu đó là filter, trong bài này tôi sẽ nói những điều cơ bản nhất, và sẽ đề cập đến trong những bài sau nữa.

Dưới đây tôi sẽ áp dụng filter để hiển thị giá tiền sản phẩm vô cùng đơn giản như sau.

Ta có công thức sử dụng filter sẽ là.

Các bạn có thể tham khảo thêm tại https://docs.angularjs.org/api/ng/filter, một số ví dụ như sau.

Source code trong bài các bạn tìm ở đây https://github.com/codeaholicguy/angular-tutorial

Trong bài sau tôi sẽ tiếp tục giới thiệu với các bạn về custom directive để xử lý mọi thứ linh hoạt hơn trong Angular.

Have fun!

Hẹn gặp lại.

Advertisements

6 thoughts on “Series AngularJS cho người mới: Filter và Validation

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s