如何在Angular js中验证输入框，该输入框是名称数组，例如"item [priceFrom]" [英] How to validate a input box in Angular js ,which name is array of name like 'item[priceFrom]'
本文介绍了如何在Angular js中验证输入框，该输入框是名称数组，例如"item [priceFrom]"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将输入文本框验证为数字，我使用ng-pattern验证数字，但我的输入名称是名称数组，例如"item [priceFrom]"，因此我将如何验证此字段.输入名称为"priceFrom".
How to validate a input text box as number,I use ng-pattern for validate number but my input name is array of name like "item[priceFrom]" so how will i validate this field.This validation is working fine if input name is "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>推荐答案
礼貌:Aleksey Solovey https://stackoverflow.com/users/8495123/aleksey-solovey
Answer courtesy :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>这篇关于如何在Angular js中验证输入框，该输入框是名称数组，例如"item [priceFrom]"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
