角度 - 原始/脏和触摸/未触摸之间的差异

Question

关于形式的 Angular 官方文档告诉我们有很多关于形式和领域的风格和指令.对于每一个,CSS类:

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

有什么区别pristine/dirty,和touched/untouched？

Answer 1

angular使用的CSS类的API参考

• @property {boolean} $ untouched如果控件尚未失去焦点,则为真.
• @property {boolean} $ touch如果控件失去焦点则为True.
• @property {boolean} $ pristine如果用户尚未与控件进行交互,则为True.
• @property {boolean} $ dirty如果用户已经与控件进行了交互,则为true.

Answer 2

$pristine/ $dirty告诉你用户是否真的改变了什么,而$touched/ $untouched告诉你用户是否只是在那里/访问过.

这对验证非常有用.之所以$dirty在用户实际访问某个控件之前总是避免显示验证响应.但是,通过仅使用$dirty属性,用户将无法获得验证反馈,除非他们实际更改了值.因此,$invalid如果用户未更改/与值交互,则字段仍不会向用户显示提示.如果用户完全忽略了必填字段,那么一切都很好.

使用Angular 1.3和ng-touched,您可以在用户模糊时立即在控件上设置特定样式,无论他们是否实际编辑了值.

这是一个显示行为差异的CodePen.

Answer 3

这是一个迟到的答案，但希望这会有所帮助。

场景一：您是第一次访问该网站，没有接触过任何字段。形式的状态是

ng-未触及和 ng-原始

场景 2：您当前正在表单的特定字段中输入值。那么状态是

ng-未触及和 ng-脏

场景 3：您已完成在字段中输入值并移至下一个字段

ng-touched 和 ng-dirty

场景 4：假设表单有一个电话号码字段。你输入了号码，但实际上输入了9位数字，但电话号码需要10位数字。那么状态为 ng-invalid

简而言之：

ng-untouched：当表单字段还没有被访问过时

ng-touched：当访问表单字段并且该字段失去焦点时

ng-pristine：表单字段值不改变

ng-dirty：表单字段值被更改

ng-valid：当表单字段的所有验证都成功时

ng-invalid：当表单字段的任何验证不成功时

Answer 4

值得一提的是，表单和表单元素的验证属性是不同的 （请注意，touched 和 untouched 仅适用于字段）：

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.

Answer 5

在Pro Angular-6中，该书的详细内容如下：

• valid：如果元素的内容有效，则此属性返回true，否则返回false。

• invalid：如果元素的内容无效，则此属性返回true，否则返回false。

• pristine：如果元素的内容未更改，则此属性返回true 。

• dirty：如果元素的内容已更改，则此属性返回true。
• untouched：如果用户尚未访问元素，则此属性返回true 。
• touched：如果用户访问过此元素，则此属性返回true 。