Câu lệnh form trong AngularJS

Định nghĩa và cách sử dụng

Sửa đổi AngularJS <form> Hành vi mặc định của phần tử.

Biểu mẫu trong ứng dụng AngularJS được赋予 certain 属性. 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:

• $pristine Chưa sửa đổi bất kỳ trường nào
• $dirty Một hoặc nhiều trường đã được thay đổ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ệ
• $subscribed 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ị布尔, là true hoặc false.

Nếu không chỉ định thuộc tính action, biểu mẫu trong AngularJS sẽ ngăn chặn hành động mặc định, tức là gửi biểu mẫu lên máy chủ.

Thực tế

Ví dụ 1

Chỉ khi các trường đầu vào yêu cầu trống, trạng thái "hợp lệ" của biểu mẫu này sẽ không được coi là "true":

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Trạng thái hiệu lực của biểu mẫu là:</p>
<h1>{{myForm.$valid}}</h1>

Thử ngay

Ví dụ 2

Áp dụng样式的 cho biểu mẫu (gốc) chưa được sửa đổi và biểu mẫu đã được sửa đổi:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Thử ngay

cú pháp

<form name="formname</form>

bằng cách sử dụng name giá trị của thuộc tính để tham chiếu biểu mẫu.

Lớp CSS

Biểu mẫu trong ứng dụng AngularJS được gán một số lớp. Các lớp này có thể được sử dụng để thiết lập樣 thức biểu mẫu dựa trên trạng thái của chúng.

Đã thêm các lớp sau:

• ng-pristine Không có trường nào chưa được thay đổi
• ng-dirty Một hoặc nhiều trường đã được thay đổ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 Xác thực một khóa mỗi lần. Ví dụ:ng-valid-requiredrất hữu ích khi có nhiều hơn một mục cần xác thực.
• ng-invalid-key Ví dụ:ng-invalid-required

Nếu giá trị đại diện của lớp falseNếu các lớp này bị xóa.