Angularjs 角度js表单验证，首次加载时_Angularjs

Angularjs 角度js表单验证，首次加载时

angularjs

Angularjs 角度js表单验证，首次加载时,angularjs,Angularjs,我有一个带有一个字段和提交按钮的简单表单。我想在字段未选中时显示错误。唯一的问题是，当页面第一次加载时，它显示了必填字段的错误。我想在提交表单时显示错误 <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <h2>Validati

我有一个带有一个字段和提交按钮的简单表单。我想在字段未选中时显示错误。唯一的问题是，当页面第一次加载时，它显示了必填字段的错误。我想在提交表单时显示错误

<!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>


var-app=angular.module（'myApp'，[]）；
app.controller（'validateCtrl'，函数（$scope）{
$scope.user；
});

您可以修改非原始时显示的跨度

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

您需要$pristine：如果用户尚未与表单交互，则为真。因此，加载页面时，不会显示所需的消息

提交表单时需要验证您需要检查输入并显示错误

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

var-app=angular.module（'myApp'，[]）；
app.controller（'validateCtrl'，函数（$scope）{
$scope.user=“”；
$scope.error=false；
$scope.validate=函数（）{
如果（$scope.user.lengthif我没有修改任何字段，单击submit$pristine将返回true。没错，修改字段时pristine为false。如果只想在提交表单时应用验证，则应在范围中使用变量，如hadijz建议。