AngularJS - різниця між первозданним / брудним та торканим / недоторканим

158

AngularJS Керівництво для розробників - Форми повідомляють, що існує багато стилів та директив стосовно форм та полів. Для кожного класу CSS:

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

Яка різниця між pristine/dirtyі touched/untouched?

angularjs

— Луїс Масуеллі
джерело

3

Це тепер знаходиться в документації, до якої ви зв'язані, під заголовком "Використання класів CSS".

— Бернхард Хофманн

1

Ви маєте рацію :) Все, здається, трохи нове (поряд із новими класами, які він визначає)

— Луїс Масуеллі

220

AngularJS Керівництво для розробників - CSS-класи, які використовує AngularJS

@property {boolean} $ недоторканий True, якщо контроль ще не втратив фокус.

@property {boolean} $ торкнувся True, якщо контроль втратив фокус.

@property {boolean} $ pristine True Якщо користувач ще не взаємодіяв з елементом управління.

@property {boolean} $ dirty Правда, якщо користувач уже взаємодіяв із елементом управління.

— Юрій Рожовецький
джерело

89

$pristine/ $dirtyповідомляє, чи дійсно користувач щось змінив , а $touched/ $untouchedповідомляє, чи користувач просто був там / відвідував .

Це дійсно корисно для перевірки. Причиною цього $dirtyзавжди було уникати показу відповідей на підтвердження, поки користувач фактично не відвідав певний елемент контролю. Але, використовуючи лише $dirtyвластивість, користувач не отримає відгуку перевірки, якщо б він фактично не змінив значення. Отже, $invalidполе все ще не відображатиме запит користувача, якби користувач не змінив / не взаємодіяв зі значенням. Якщо користувач повністю ігнорував обов'язкове поле, все виглядало нормально.

За допомогою Angular 1.3 і ng-touchedтепер ви можете встановити певний стиль на елементі управління, як тільки користувач розмивається, незалежно від того, редагували вони значення чи ні.

Ось CodePen, який показує різницю в поведінці.

— XML
джерело

Я шукаю спосіб очистити помилки перевірки форми. $ setPristine не робить цього. Я бачив форму пропозицій інших. $ SetUntouched, але виглядає, що ця функція недоступна в кутовій 1,3 19 бета-версії, що є версією, яку я використовую. Однак я можу зателефонувати form.field_name. $ SetUntouched, але робити це для всіх полів обтяжливо, чи є кращий спосіб?

— Т. Рекс

$setPristineпросто робить форму un- $dirty. Я думаю, ви можете захотіти form.setValidity(). Дивіться кілька корисних відповідей у цій публікації .

— XML

14

У Pro Angular-6 книга детально описана нижче;

valid : Ця властивість повертає true, якщо вміст елемента є дійсним, а інакше помилковим.
недійсне : це властивість повертає істину, якщо вміст елемента недійсний, а в іншому випадку помилковий.
первозданний : ця властивість повертає істину, якщо вміст елемента не було змінено.
брудно : це властивість повертає істину, якщо зміст вмісту елемента було змінено .
недоторкані : це властивість повертає істину, якщо користувач не відвідав елемент.
touch : Ця властивість повертається як істина, якщо користувач відвідав елемент.

— fgul
джерело

6

Варто зазначити, що властивості перевірки різні для форм та елементів форми (зауважте, що торкання та недоторканість стосуються лише полів):

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.

— Івон Абруроу
джерело