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é.

<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>
view raw form.html hosted with ❤ by GitHub

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>
...
view raw form.html hosted with ❤ by GitHub

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.

<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>
view raw form.html hosted with ❤ by GitHub

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.

<form class="form-horizontal" name="reviewForm"
ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)">
view raw form.html hosted with ❤ by GitHub

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>
view raw filter.html hosted with ❤ by GitHub

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

{{ data* | filter:options* }}
view raw filter.html hosted with ❤ by GitHub

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 -->
view raw filter.html hosted with ❤ by GitHub

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.

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

    1. 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

    2. 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ệ,

    1. 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.

Bình luận

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 Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s