AngularJS Form - Biểu mẫu
Angular form là một tập hợp các điều khiển (control) của HTML:
- input elements
- select elements
- button elements
- textarea elements
Thử ví dụ sau:
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br>
<br>
<button ng-click="reset()">
RESET</button>
</form>
<p>
form = {{user}}</p>
<p>
master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function ($scope) {
$scope.master = { firstName: "DOTNET", lastName: "GROUP" };
$scope.reset = function () {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
Giải thích ví dụ:
Phương thức reset() dùng đẻ sao chép giá trị của đối tượng master vào đối tượng user bằng phương thức angular.copy(). Nếu bạn không dùng phương thức này mà gán trực tiếp master vào user, thì khi đổi giá trị user trên HTML, master cũng thay đổi vì cả 2 đối tượng cùng trỏ đến một địa chỉ biến.
Chỉ thị ng-click gọi phương thức reset() khi button được click.
AngularJS Form Validation - Xác thực
Angular cung cấp dịch vụ xác nhận và thông báo người dùng khi dữ liệu đầu vào không hợp lệ.
<form id="form1" runat="server" ng-app="myApp" ng-controller="validateCtrl" name="myForm"
novalidate>
<p>
Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span
ng-show="myForm.user.$error.required">Username không được rỗng.</span> </span>
</p>
<p>
Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><span
ng-show="myForm.email.$error.required">Email không được rỗng.</span> <span ng-show="myForm.email.$error.email">
Địa chỉ email không hợp lệ.</span> </span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
$scope.user = 'Quang Lê';
$scope.email = 'webmaster@dotnet.vn';
});
</script>
Giải thích ví dụ
ng-model liên kết dữ liệu đến các thẻ input trên HTML, trong ví dụ trên ta có 2 model là user và email.
Chỉ thị required do Angular định nghĩa sẵn, dùng để kiểm tra các trường có rỗng hay không và phải xuất hiện cùng ng-model trên cùng 1 thẻ.
ng-show sẽ hiển thị thẻ đang có thuộc tính là chỉ thị này và giá trị của biểu thức là true. Như ví dụ trên, biểu thức là $dirty và $invalid, nếu thỏa sẽ báo lỗi và xuất hiện đối tượng $error. Ta có thể xử lý và hiển thị câu thông báo thích hợp tùy từng lỗi qua đối tương này (required không được rỗng, email địa chỉ email phải hợp lệ).
| Property | Description |
| $dirty | Người dùng đã tương tác với trường. |
| $valid | Giá trị trường hợp lệ. |
| $invalid | Giá trị trường không hợp lệ. |
| $pristine | Người dùng chưa tương tác với trường. |