在 Angular 中访问无格式输入的 $pristine 属性？

Question

假设我有以下 HTML...

<div class="row">
    <div class="col-xs-3 align-right">
      <p>Email</p>
    </div>
    <div class="col-xs-7">
      <input type="text" class="form-control" ng-model="registrationForm.email.value"/>
      <span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
    </div>
  </div>

HTML 的这一点创建了一个电子邮件字段，如果提供的电子邮件无效，则会显示一个错误标签。这非常有效，并且不是我的问题的一部分。

我想稍微改变一下这个标签的行为。当用户第一次访问表单时，我不想显示错误标签，除非用户更改了表单输入的值。

$pristine 和 $dirty 属性似乎是关键，但我对如何使用它们感到困惑。如果我尝试访问 email.value（即 registrationForm.email.value.$pristine）的属性，则属性似乎未定义。

我想避免将这些输入包含在 HTML 形式中。还有什么方法可以让我保留对这些属性的使用，如果可以，怎么做？

Answer 1

当您创建 <form> 元素时，它会创建一个带有表单名称的 $scope 变量。例如：

<form name="regForm">
  <div class="row">
    <div class="col-xs-3 align-right">
      <p>Email</p>
    </div>
    <div class="col-xs-7">
      <input type="text" class="form-control" name="email" ng-model="registrationForm.email.value"/>
      <span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
    </div>
  </div>
 </form>

您可以使用 $scope.regForm.email.$pristine 访问 $pristine。

没有 <form>，只需使用 ng-form, which will give you the functionality of the form, without needing an actual <form> element. See this post 即可获得更多信息。

在 Angular 中访问无格式输入的 $pristine 属性？

Accesing $pristine property of input without form in Angular?

html

javascript

forms

interaction

angularjs