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é.
| <form class="form-horizontal" name="reviewForm" | |
| ng-controller="ReviewController as reviewCtrl" | |
| ng-submit="reviewCtrl.addReview(product)"> | |
| <blockquote> | |
| <b>{{reviewCtrl.review.stars}} star(s)</b> | |
| {{reviewCtrl.review.body}} | |
| <cite>- {{reviewCtrl.review.author}}</cite> | |
| </blockquote> | |
| <div class="form-group"> | |
| <label class="col-sm-1 control-label">Email</label> | |
| <div class="col-sm-6"> | |
| <input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="Email"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="col-sm-1 control-label">Review</label> | |
| <div class="col-sm-6"> | |
| <textarea ng-model="reviewCtrl.review.body" class="form-control" rows="3"></textarea> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label class="col-sm-1 control-label">Star</label> | |
| <div class="col-sm-6"> | |
| <select ng-model="reviewCtrl.review.stars" class="form-control"> | |
| <option value="1">1 star</option> | |
| <option value="2">2 stars</option> | |
| <option value="3">3 stars</option> | |
| <option value="4">4 stars</option> | |
| <option value="5">5 stars</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="col-sm-offset-1 col-sm-10"> | |
| <button type="submit" class="btn btn-default">Gửi</button> | |
| </div> | |
| </div> | |
| </form> |
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.
| ... | |
| <input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="Email" required> | |
| ... | |
| <textarea ng-model="reviewCtrl.review.body" class="form-control" rows="3" required></textarea> | |
| ... | |
| <select ng-model="reviewCtrl.review.stars" class="form-control" required> | |
| ... | |
| </select> | |
| ... |
Thử không nhập gì và nhấn Gửi. Chúng ta thấy kết quả như thế này.
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.
| <div class="form-group"> | |
| <div>reviewForm is {{reviewForm.$valid}}</div> | |
| <div class="col-sm-offset-1 col-sm-10"> | |
| <button type="submit" class="btn btn-default">Gửi</button> | |
| </div> | |
| </div> |
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.$valid là true. Vô cùng đơn giản chỉ việc đính kèm điều kiện khi gọi ng-submit như sau.
| <form class="form-horizontal" name="reviewForm" | |
| ng-controller="ReviewController as reviewCtrl" | |
| ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)"> |
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.
| <h2>{{product.price | currency}}</h2> |
Ta có công thức sử dụng filter sẽ là.
| {{ data* | filter:options* }} |
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.
| {{'1452141766698' | date:'MM/dd/yyyy @ h:mma'}} <!-- 01/07/2016 @ 11:44AM --> | |
| {{'Nguyen Nhat Hoang' | uppercase}} <!-- NGUYEN NHAT HOANG --> | |
| {{'My Description' | limitTo:8}} <!-- My Descr --> | |
| <li ng-repeat="product in store.products | limitTo:3"> <!-- Show only 3 products --> | |
| <li ng-repeat="product in store.products | orderBy:'-price'"> <!-- Show products by descending price order --> |
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.
Codeaholicguy 
Cái required của anh là message của html 5, giờ em muốn cútomize message báo lỗi khi validate thì làm thế lào ạ :v ?
nếu bạn muốn customize, đầu tiên bạn phải turn off chế độ default bằng cách thêm attribute novalidate trong form, angular hỗ trợ bạn các class như ng-valid, ng-invalid, ng-pristine, … bạn chỉ cần khai báo style cho class trong file css tương ứng để có thể customize
Bạn có thể tham khảo thêm ở https://docs.angularjs.org/api/ng/directive/form
Cụ thể là khi input của bạn được nhập, angular sẽ change class của nó về ng-dirty, nếu invalid thì sẽ append class ng-invalid và vân vân, vì thế bạn có thể custom dạng
.ng-invalid.ng-dirty {
border-color: #FA787E;
}
.ng-valid.ng-dirty {
border-color: #78FA89;
}
Để thay đổi màu viền của input nếu ko hợp lệ,
Muốn làm custom validation kết hợp ajax, vd như kiểm tra user đã tồn tại trong database chưa thì làm như lào ạ :v?
trong những phần sau sẽ có hướng dẫn chi tiết, nhưng concept sẽ là bạn tạo 1 hàm check valid input trong controller trả về boolean và đính kèm điều kiện này trong action submit.