$ dirty vs $ invalid：有什么区别？

I am novice in angular. I am confused by $dirty and $invalid, they almost sounds the same.

我是棱角分明的新手。我很困惑$ dirty和$ invalid，他们几乎听起来一样。

What is the difference between $dirty and $invalid used in email dg-model? Below is the scenario. It's an example form W3Schools.

电子邮件dg-model中使用的$ dirty和$ invalid有什么区别？以下是场景。这是W3Schools的一个例子。

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
    <p>
        Username:<br>
        <input type="text" name="user" ng-model="user" required>
        <span style="color: red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required.</span>
        </span>
    </p>
    <p>
        Email:<br>
        <input type="email" name="emaill" ng-model="email" required>
        <span style="color: red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
            <span ng-show="myForm.email.$error.required">Email is required.</span>
            <span ng-show="myForm.email.$error.email">Invalid email address.</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-click="Count()"
            ng-disabled="myForm.$invalid" title="Submit" value="Submit">
    </p>
</form>

EDIT 1 :

编辑1：

I am wonder if I change ng-model name from email to email8 it's not working any more.

我很奇怪，如果我将ng-model名称从电子邮件更改为email8，它将不再起作用。

<input type="email" name="emaill" ng-model="email8" required>

Whether the validation is doing by myForm html element name which is not defined using ng attribute. How does it work?

是否通过myForm html元素名称进行验证，该名称未使用ng属性定义。它是如何工作的？

ng-show="myForm.email.$dirty && myForm.email.$invalid"

5 个解决方案

#1

• $dirty: It will be TRUE, if the user has already interacted with the form.
• $ dirty：如果用户已经与表单进行了交互，那么它将为TRUE。
• $invalid: It will be TRUE, if at least one containing form and control is invalid.
• $ invalid：如果包含表单和控件的至少一个无效，则为TRUE。

Source

资源

Also on Angular Docs

同样在Angular Docs上

After the update in the Question...The validation is being done on the form element name. All the ng-models inside a form is tracked and that is how it is working.

在问题中更新之后......正在对表单元素名称进行验证。跟踪表单中的所有ng-model以及它的工作方式。

Also changing a ng-model name will have no impact on validation. I tried your link and it works for me. That has to work.

同时更改ng-model名称对验证没有影响。我尝试了你的链接，它对我有用。这必须奏效。

#2

$dirty is True if user has already interacted with input. And $invalid is true if the the input is not a valid email address

如果用户已经与输入进行了交互，则$ dirty为True。如果输入不是有效的电子邮件地址，则$ invalid为true

#3

$dirty means the user has changed the input value, $invalid means the address itself is invalid. Therefore the error is only shown if the user has actively changed the input value to either an empty or invalid value.

$ dirty表示用户已更改输入值，$ invalid表示地址本身无效。因此，仅当用户主动将输入值更改为空值或无效值时，才会显示错误。

#4

$error is the object of errors where the key is the field validation name and value is the actual error message

$ error是错误的对象，其中键是字段验证名称，值是实际错误消息

<input type="email" name="emailName" ng-model="email" required>

for this example myForm.emailName.$error.email = true if email is not matched with format. myForm.emailName.$error.required = true if you haven't added anyhting in input field

对于此示例myForm.emailName。$ error.email = true如果电子邮件与格式不匹配。 myForm.emailName。$ error.required =如果您尚未在输入字段中添加任何内容，则为true

you can check valid or not of the field directly by using myForm.emailName.$valid but the problem in your case is they want to show the user what is the error by having two cases. so they entered into $error object to check for the error is required email or invalid email

您可以使用myForm.emailName。$ valid直接检查字段的有效与否，但在您的情况下，问题是他们希望通过两种情况向用户显示错误是什么。所以他们输入$ error对象来检查错误是否需要电子邮件或无效的电子邮件

1.Email is required.
2.Invalid email address.

so they used $error object. this is how myForm.emailName looks:

所以他们使用了$ error对象。这就是myForm.emailName的样子：

{"$viewValue":"ss","$validators":{},"$asyncValidators":{},"$parsers":[],"$formatters":[null],"$viewChangeListeners":[],"$untouched":false,"$touched":true,"$pristine":false,"$dirty":true,"$valid":false,"$invalid":true,"$error":{"email":true},"$name":"emailName","$options":null}

I think the example provide by you explains a lot.

我认为你提供的例子解释了很多。

#5

You have done mistake That is why it was not working , can you see below code which you have written

你做错了这就是它无法正常工作的原因，你能看到下面你编写的代码吗？

<pre>
<input type="email" name="emaill" ng-model="email8" required>
<ng-show="myForm.email.$dirty && myForm.email.$invalid">
</pre>

Why it was not working because input name you have given "emaill" and in myForm.email.$dirty you have given "email" If both names should be same then it will work fine

为什么它没有工作，因为输入名称你给了“电子邮件”和myForm.email。$ dirty你给了“电子邮件”如果两个名字应该相同那么它将工作正常

<pre>
<input type="email" name="emaill" ng-model="email8" required>
<ng-show="myForm.emaill.$dirty && myForm.emaill.$invalid"></pre>