Question

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

$dirty $invalid中使用的email和ng-model之间的区别是什么？以下是scenario。这是一个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>

编辑1：

我想知道我是否将ng-model名称从email更改为email8它不再有效。

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

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

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

Answer 1

$dirty：如果用户已与表单进行过互动，则为TRUE。
$invalid：如果至少有一个包含表单和控件的内容无效，则为TRUE。

Source

Also on Angular Docs

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

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

Answer 2

如果用户已经与输入交互，则

$ dirty为True。如果输入不是有效的电子邮件地址，则$ invalid为true

Answer 3

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

Answer 4

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

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

如果电子邮件与格式不匹配，则为此示例myForm.emailName.$error.email = true

。 myForm.emailName.$error.required = true如果您尚未在输入字段中添加任何内容

您可以使用myForm.emailName.$valid直接检查字段的有效与否在你的情况下，他们想要通过两个案例向用户显示错误是什么问题。所以他们进入$error object检查error is required email or invalid email

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

所以他们使用了$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}

我认为您提供的示例解释了很多。

Answer 5

你做错了这就是为什么它不起作用，你能看到下面的代码吗？

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

为什么它不起作用，因为您输入了“电子邮件”的输入名称，而在myForm.email.$dirty中您给出了“电子邮件”如果两个名称应该相同则可以正常工作

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

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

5 个答案: