ng-message没有显示
[英]ng-message is not showing
问题描述
我是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>
2 个解决方案
解决方案1
2 已采纳 2016-03-02 12:28:46
您的输入位于ng-form指令内，因此可以通过该ng-form访问与该输入（或该ng-form指令内的任何输入）相关的验证错误。
因此，只需将您的ng-messages更改为：
<div ng-messages="step1form.name1.$error">
<div ng-message="pattern">This field is invalid</div>
</div>
解决方案2
0 2016-03-02 12:24:22
AngularJS 1.2.x不支持ng-message 。
它是在AngularJS 1.3中引入的。
Angularjs | ng-message在使用$ compile从指令加载html时未显示错误消息
[英]Angularjs | ng-message not showing error message when load html from directive by using $compile
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.