formChỉ thị AngularJS
Thí 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>
Định nghĩa và Cách sử dụng
AngularJS sửa đổi hành vi mặc định của <form>phần tử.
Các biểu mẫu bên trong ứng dụng AngularJS được cung cấp các 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.
Biểu mẫu có các trạng thái sau:
$pristineChưa có trường nào được sửa đổi$dirtyMột hoặc nhiều đã được sửa đổi$invalidNội dung biểu mẫu không hợp lệ$validNội dung biểu mẫu hợp lệ$submittedBiể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à là true
hoặc false.
Biểu mẫu trong AngularJS ngă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>
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.
Các lớp CSS
Các biểu mẫu bên trong ứng dụng AngularJS được cung cấp các 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-pristineKhông có trường nào chưa được sửa đổing-dirtyMột hoặc nhiều trường đã được sửa đổing-validNội dung biểu mẫu hợp lệng-invalidNội dung biểu mẫu không hợp lệng-valid-keyMột khóa cho mỗi lần xác thực. Ví dụ:,ng-valid-requiredhữu ích khi có nhiều thứ phải được xác thựcng-invalid-keyThí dụ:ng-invalid-required
Các lớp bị loại bỏ nếu giá trị mà chúng đại diện là false.
Thí dụ
Áp dụng kiểu cho các biểu mẫu chưa sửa đổi (nguyên sơ) 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>