Question

我有一个带有一个字段和提交按钮的简单表单。我想在取消选中某个字段时显示错误。唯一的问题是，第一次加载页面时，它显示错误，该字段是必需的。我希望在提交表单时显示错误。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

  <script>
  var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope) {
  $scope.user;

});
 </script>

 </body>
 </html>

Answer 1

您可以修改不是原始时显示的范围。

<span style="color:red" ng-show="myForm.user.$invalid && !myForm.user.$pristine">

Answer 2

您需要 $ pristine ：如果用户尚未与表单进行交互，则为TRUE。因此，当加载页面时，不会显示所需的消息。
需要验证表单何时被提交，您需要检查输入并显示错误。

我不知道是否有更好的方法，但对于你的情况，我已经提出了以下方法。

var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope) {
  $scope.user = "";
  $scope.error=false;
  
  $scope.validate = function(){
   
   if($scope.user.length<=0)
     $scope.error=true;
  }

});

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
  <script data-require="angular.js@1.4.8" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="(myForm.user.$invalid  && !myForm.user.$pristine) || error">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<input type="submit" name="bt" ng-click="validate()">
</form> 
  </body>

</html>

第一次加载时，角度js表单验证

2 个答案: