如何在Angular js中验证输入框，该输入框是名称数组，例如“ item [priceFrom]”

Question

如何将输入文本框验证为数字，我使用ng-pattern验证数字，但是我的输入名称是名称数组，例如“ item [priceFrom]”，因此我将如何验证此字段。如果输入名称为“ priceFrom”。

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //$scope.name = "John Doe"; }); 

 <!DOCTYPE html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <form name="myForm" class="form-horizontal" method="get" action=""> <div class="input-field"> <p class="heading">Price</p> <div class="gutter6"> <div class="col-6"> <div class="input-wrapper has-float-label"> <input ng-pattern="/^[0-9]*$/" ng-model="search.priceFrom" type="text" id="price" name="item[priceFrom]" class="form-field"> <label class="form-control-placeholder ">From</label> </div> <span ng-show="myForm.item[priceFrom].$error.pattern">Not a valid number!</span> </div> <div class="col-6"> <div class="input-wrapper"> <input ng-pattern="/^[0-9]*$/" ng-model="search.priceTo" type="text" id="price" name="item[priceTo]" class="form-field" value=""> <label class="form-control-placeholder">To</label> </div> <span ng-show="myForm.item[priceTo].$error.pattern">Not a valid number!</span> </div> </div> </div> <div class="form-group text-center" style="margin-top: 5%;"> <input class="button submit esein5" value="Apply" type="submit"> <button type="Reset" class="button submit esein5">Reset</button> </div> </form> </body> 

Answer 1

回答礼貌：Aleksey Solovey https://stackoverflow.com/users/8495123/aleksey-solovey

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { //$scope.name = "John Doe"; }); 

 .error{ color:red; } 

 <!DOCTYPE html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp" ng-controller="myCtrl"> <form name="myForm" class="form-horizontal" method="get" action=""> <div class="input-field"> <p class="heading">Price</p> <div class="gutter6"> <div class="col-6"> <div class="input-wrapper has-float-label"> <input ng-pattern="/^[0-9]*$/" ng-model="search.priceFrom" type="text" id="price" name="item[priceFrom]" class="form-field"> <label class="form-control-placeholder ">From</label> </div> <span class="error" ng-show="myForm['item[priceFrom]'].$error.pattern">Not a valid number!</span> </div> <div class="col-6"> <div class="input-wrapper"> <input ng-pattern="/^[0-9]*$/" ng-model="search.priceTo" type="text" id="price" name="item[priceTo]" class="form-field" value=""> <label class="form-control-placeholder">To</label> </div> <span class="error" ng-show="myForm['item[priceTo]'].$error.pattern">Not a valid number!</span> </div> </div> </div> <div class="form-group text-center" style="margin-top: 5%;"> <input class="button submit esein5" value="Apply" type="submit"> <button type="Reset" class="button submit esein5">Reset</button> </div> </form> </body>