Chỉ thị form
AngularJS
Ví dụ
"Trạng thái hợp lệ" của biểu mẫu này sẽ không được coi là "đúng", miễn là trường nhập bắt buộc trống:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The forms's valid state is:</p>
<h1>{{myForm.$valid}}</h1>
Hãy tự mình thử »Định nghĩa và cách sử dụng
AngularJS sửa đổi hành vi mặc định của phần tử <form>
.
Các biểu mẫu bên trong ứng dụng AngularJS được cung cấp một số thuộc tính nhất định. Các thuộc tính này mô tả trạng thái hiện tại của biểu mẫu.
Các biểu mẫu có các trạng thái sau:
-
$pristine
Chưa có trường nào được sửa đổi -
$dirty
Một hoặc nhiều hơn đã được sửa đổi -
$invalid
Nội dung biểu mẫu không hợp lệ -
$valid
Nội dung biểu mẫu hợp lệ -
$submitted
Biểu mẫu đã được gửi
Giá trị của mỗi trạng thái đại diện cho một giá trị Boolean và có thể là true
hoặc false
.
Các biểu mẫu trong AngularJS ngăn chặn hành động mặc định đang gửi biểu mẫu đến máy chủ nếu thuộc tính hành động không được chỉ định.
Cú pháp
<form name=" formname "></form>
Các biểu mẫu đang được tham chiếu bằng cách sử dụng giá trị của thuộc tính name.
Lớp CSS
Các biểu mẫu bên trong ứng dụng AngularJS được cung cấp một số lớp nhất định. Các lớp này có thể được sử dụng để tạo kiểu cho các biểu mẫu theo trạng thái của chúng.
Các lớp sau được thêm vào:
-
ng-pristine
Không có trường nào chưa được sửa đổi -
ng-dirty
Một hoặc nhiều trường đã được sửa đổi -
ng-valid
Nội dung biểu mẫu hợp lệ -
ng-invalid
Nội dung biểu mẫu không hợp lệ -
ng-valid- key
Một khóa cho mỗi lần xác thực. Ví dụ:ng-valid-required
, hữu ích khi có nhiều thứ phải được xác thực -
ng-invalid- key
Ví dụ:ng-invalid-required
Các lớp sẽ bị xóa nếu giá trị mà chúng đại diện là false
.
Ví dụ
Áp dụng kiểu cho các biểu mẫu chưa sửa đổi (nguyên bản) và cho các biểu mẫu đã sửa đổi:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
Hãy tự mình thử »