javascript - 在 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>

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

没有 <form> ，只需使用 ng-form ，这将为您提供表单的功能，而无需实际的 <form>元素。请参阅this post了解更多信息。