Question

我是AngularJS的新手。我正在尝试使用ng-pattern验证我的表单。我只想在我的字段中输入数字，当用户输入任何字符或特殊字符时，我希望它抛出错误信息。但它不是仅仅禁用下一个按钮。我不知道我哪里错了。我希望只有在用户输入错误输入时才会出现错误消息。这是我的代码。

// Code goes here


var app = angular.module("MyApp", ["ngAnimate","ngMessages"]);
  app.controller('MyCtrl', function($scope, $timeout) {	    
  	    $scope.sliderValue = null;
  	 		 $scope.name = '';    
  	 	 	 $scope.data = {
   		 singleSelect: null,
    		 multipleSelect: [],
    		 option1: 'option-1',
   		};
		   $scope.forceUnknownOption = function() {
     		$scope.data.singleSelect = 'nonsense';
   		};

$scope.slider = {
  value: 100000,
  options: {
    floor: 100000,
    ceil: 20000000,
    showSelectionBar: true,
            getSelectionBarColor: function(value) {
           if (value <= 3000000)
                return 'red';
            if (value <= 5000000)
                return 'orange';
            if (value <= 10000000)
                return 'blue';
            if (value <= 20000000)
                return 'yellow'; 
            return '#2AE02A';
        }
  } 
};

$scope.sliderloanamount = {
  value: 100000,
  options: {
    floor: 100000,
    ceil: 30000000,
    showSelectionBar: true,
            getSelectionBarColor: function(value) {
           if (value <= 3000000)
                return 'red';
            if (value <= 5000000)
                return 'orange';
            if (value <= 10000000)
                return 'blue';
            if (value <= 20000000)
                return 'yellow'; 
            return '#2AE02A';
        }
  } 
};

  });

<!DOCTYPE html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>

<body ng-controller="MyCtrl">
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<div class="row">
<div class="col-sm-6"><h3 class="zoomIn">My annual turnover is</h3></div>
<div ng-form='step1form'>
<div class="col-sm-6">
<input ng-model="name1" name="name1" type="text" ng-pattern="/^\d+$/"  class="zoomIn" placeholder="Your Annual Turnover" required>
      <div ng-messages="myform.name1.$error">
        <div ng-message="pattern">This field is invalid</div>
      </div>
</div>
</div>
</div>
<div class="row">
<button ng-disabled="!step1form.$valid" ng-click="step = 5">Next</button>
</div>
</div>  

<div ng-show="step==5">
<div class="row">
<div class="col-sm-6"><h3 class="zoomIn">I make annual net profit of</h3></div>
<div class="col-sm-6">
<div ng-form='step5form'>
<input ng-model="name2" class="zoomIn" placeholder="Your Annual Net Profit" required>
</div>
</div>
</div>
</div> 

</form>

<script>document.write("<base href=\"" + document.location + "\" />");</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script src="app.js"></script>

</body>
</html>

Answer 1

您的输入位于ng-form指令内，因此可以通过ng-form访问与该输入相关的验证错误（或ng-form指令内的任何输入）。

因此，只需将ng-messages更改为：

即可

<div ng-messages="step1form.name1.$error">
     <div ng-message="pattern">This field is invalid</div>
</div>

<强> Working Demo

Answer 2

AngularJS 1.2.x不支持

ng-message。

它是在AngularJS 1.3中引入的。

ng-message未显示

2 个答案: