在Angular中访问没有表单的输入的$原始属性？答案

【问题标题】：Accesing $pristine property of input without form in Angular?在Angular中访问没有表单的输入的$原始属性？
【发布时间】：2017-01-03 00:09:50
【问题描述】：

假设我有以下 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 表单中。有没有办法让我保留对这些属性的使用，如果有，如何？

【问题讨论】：

标签： javascript html angularjs forms interaction

【解决方案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，它将为您提供表单的功能，而无需实际的<form> 元素。请参阅this post 了解更多信息。

【讨论】：