javascript - 如果输入字段仍然是 $pristine，如何显示焦点从输入字段移出时的错误？

Question

我有一个表单，我需要在我的 $pristine 字段上显示错误。如果我只专注于该领域并专注于而不输入任何内容。但错误从一开始就不应该是可见的。

这是我的fiddle .

这是我的代码...

<div ng-app>
  <form action="" name="myForm">
  <div>
    <input type="text" ng-model="name" name="n">
    <span ng-show="myForm.n.$pristine">please fill something</span>
  </div>
  <div>
    <input type="text" ng-model="email">
    <span ng-show="">please fill something</span>
    <span ng-show="">invalid password</span>
  </div>
  <div>
    <input type="text" ng-model="cemail">
    <span ng-show="">please fill something</span>
    <span ng-show="">password dosent match</span>
  </div>
  <div>
    <input type="submit">
  </div>
  </form>
 </div>

Answer 1

已编辑

很抱歉，我的互联网连接速度很慢，因此无法编辑jsfiddle，但我从您的 fiddle 代码中为您剪了一个片段。请参阅下面的代码。

请查看下面编辑后的代码。需要考虑的一些方面:

• 我修正了之前回答中的一些拼写错误。我的错
• 我正确声明了该应用:您的代码是 <div ng-app>我将其替换为 <div ng-app="app">
• 您的 Controller 很简单 function TodoCtrl($scope) {} 。我用语法 angular.module('app', []).controller('TodoCtrl', TodoCtrl); 替换它
• 我正常工作的最低版本的 Angular 是1.2.0

function TodoCtrl($scope) {
  $scope.visible = [];
  $scope.show = function(form, input) {
    if (form && input) {
      if (form[input].$pristine && !form[input].$modelValue) {
        $scope.visible[form[input].$name] = true;
      }
    }
  }
}

angular.module('app', []).controller('TodoCtrl', TodoCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

<div ng-app="app" ng-controller="TodoCtrl">
  <form action="" name="myForm">
    <div>
      <input type="text" ng-model="name" name="n" ng-blur="show(myForm, 'n')">
      <span ng-show="visible['n']">please fill something</span>
    </div>
    <div>
      <input type="text" ng-model="email" name="myEmail" ng-blur="show(myForm, 'myEmail')">
      <span ng-show="visible['myEmail']">please fill something</span>
      <span ng-show="">invalid password</span>
    </div>
    <div>
      <input type="text" ng-model="cemail" name="cemail" ng-blur="show(myForm, 'cemail')">
      <span ng-show="visible['cemail']">please fill something</span>
      <span ng-show="">password dosent match</span>
    </div>
    <div>
      <input type="submit">
    </div>
  </form>
</div>