AngularJS - sự khác biệt giữa nguyên sơ / bẩn và chạm / không chạm

157

Hướng dẫn dành cho nhà phát triển AngularJS - Biểu mẫu cho biết có nhiều kiểu và chỉ thị liên quan đến biểu mẫu và trường. Đối với mỗi người, một lớp CSS:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

Sự khác biệt giữa pristine/dirty, và touched/untouched?

angularjs

— Luis Masuelli
nguồn

3

Bây giờ đây là trong tài liệu bạn liên kết đến, dưới tiêu đề "Sử dụng các lớp CSS".

— Bernhard Hofmann

1

Bạn nói đúng :) Mặc dù có vẻ hơi mới (bên cạnh các lớp mới mà nó định nghĩa)

— Luis Masuelli

219

Hướng dẫn dành cho nhà phát triển AngularJS - Các lớp CSS được sử dụng bởi AngularJS

@property {boolean} $ chưa được xử lý Đúng nếu điều khiển chưa bị mất tiêu điểm.

@property {boolean} $ chạm đúng Nếu điều khiển bị mất tiêu điểm.

@property {boolean} $ nguyên sơ Đúng nếu người dùng chưa tương tác với điều khiển.

@property {boolean} $ bẩn Đúng nếu người dùng đã tương tác với điều khiển.

— Yuriy Rozhovetskiy
nguồn

89

$pristine/ $dirtycho bạn biết liệu người dùng có thực sự thay đổi bất cứ điều gì hay không, trong khi $touched/ $untouchedcho bạn biết liệu người dùng có đơn thuần ở đó / đã truy cập hay không .

Điều này thực sự hữu ích cho việc xác nhận. Lý do $dirtylà luôn luôn để tránh hiển thị phản hồi xác thực cho đến khi người dùng thực sự đã truy cập một điều khiển nhất định. Nhưng, bằng cách chỉ sử dụng thuộc $dirtytính, người dùng sẽ không nhận được phản hồi xác thực trừ khi họ thực sự thay đổi giá trị. Vì vậy, một $invalidtrường vẫn không hiển thị cho người dùng lời nhắc nếu người dùng không thay đổi / tương tác với giá trị. Nếu người dùng hoàn toàn bỏ qua một trường bắt buộc, mọi thứ đều ổn.

Với Angular 1.3 và ng-touched, giờ đây bạn có thể đặt một kiểu cụ thể trên một điều khiển ngay khi người dùng bị mờ, bất kể họ có thực sự chỉnh sửa giá trị hay không.

Đây là CodePen cho thấy sự khác biệt trong hành vi.

— XML
nguồn

Tôi đang tìm cách để xóa các lỗi xác thực của biểu mẫu. hình thức. $ setPristine không làm điều đó. Tôi đã thấy biểu mẫu đề xuất của người khác. $ SetUntouched, nhưng có vẻ như điều này không có sẵn trong phiên bản 1.3 19 beta góc cạnh, đây là phiên bản tôi đang sử dụng. Tuy nhiên tôi có thể gọi form.field_name. $ SetUntouched, nhưng làm điều đó cho tất cả các lĩnh vực là gánh nặng, có cách nào tốt hơn không?

— T. Rex

$setPristinechỉ đơn giản là làm cho biểu mẫu un- $dirty. Tôi nghĩ rằng bạn có thể muốn form.setValidity(). Xem một số câu trả lời hữu ích về bài viết này .

— XML

14

Trong cuốn sách Pro Angular-6 được trình bày chi tiết như dưới đây;

hợp lệ : Thuộc tính này trả về true nếu nội dung của phần tử là hợp lệ và sai khác.
không hợp lệ : Thuộc tính này trả về true nếu nội dung của phần tử không hợp lệ và sai khác.
nguyên sơ : Thuộc tính này trả về true nếu nội dung của phần tử không bị thay đổi.
bẩn : Thuộc tính này trả về true nếu nội dung của phần tử đã bị thay đổi .
không bị ảnh hưởng : Thuộc tính này trả về true nếu người dùng chưa truy cập phần tử.
touch : Thuộc tính này trả về true nếu người dùng đã truy cập phần tử.

— fgul
nguồn

6

Điều đáng nói là các thuộc tính xác thực là khác nhau đối với các biểu mẫu và thành phần của biểu mẫu (lưu ý rằng chạm và không được chạm vào chỉ dành cho các trường):

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.

— Yvonne Aburrow
nguồn