1
我是AngularJS的新手。我正在尝试使用ng-pattern验证我的表单。我只想在我的字段中输入数字，当用户键入任何字符或特殊字符时，我希望它引发错误信息。但它不是仅仅禁用下一个按钮。我不知道我要去哪里错。我想只有当用户输入错误的输入时才会出现错误信息。这是我的代码。ng消息未显示
// Code goes here
var app = angular.module("MyApp", ["ngAnimate","ngMessages"]);
app.controller('MyCtrl', function($scope, $timeout) { \t
\t $scope.sliderValue = null;
\t \t \t $scope.name = '';
\t \t \t $scope.data = {
\t \t singleSelect: null,
\t \t multipleSelect: [],
\t \t option1: 'option-1',
\t \t };
\t \t $scope.forceUnknownOption = function() {
\t \t $scope.data.singleSelect = 'nonsense';
\t \t };
$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>
感谢，它的工作 – user5397448