如果仍然是$ pristine，如何从输入字段显示聚焦错误？

Question

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

这是我的小提琴 。

这是我的代码...

<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 ，但是我从您的小提琴代码中为您摘了一个片段 。 参见下面的代码。

请查看下面的代码。 需要考虑的一些方面：

• 我在先前的回答中修正了一些错字 。 我的错
• 我正确声明了该应用程序 ：您的代码为<div ng-app>我将其替换为<div ng-app="app">
• 您的控制器是简单的function TodoCtrl($scope) {} 。 我用语法angular.module('app', []).controller('TodoCtrl', TodoCtrl);替换了它angular.module('app', []).controller('TodoCtrl', TodoCtrl);
• 我可以正常工作的最低角度版本是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> 

Answer 2

可以在“输入”文本框中使用required ，如下所示

 <div>
    <input type="text" ng-model="name" name="n" required>
    <span ng-show="myForm.n.$pristine || myForm.n.$error.required">please fill something</span>
  </div>

小提琴链接

希望这可以帮助！！