如何验证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]'
【发布时间】：2018-07-16 07:17:44
【问题描述】：

如何将输入文本框验证为数字，我使用 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>

【问题讨论】：

这是一个错误的语法。将 item[priceFrom] 更改为 priceFrom。请注意，它只是一个字符串。如果你打算使用控制器中的一些变量，那么它会是name="{{item[priceFrom]}}"，但不建议这样做
这在我的应用程序中是不可能的，因为在服务器端我将值作为 $_GET 这就是为什么我使用 'item[priceFrom]' 所以我们可以通过 ng-model 而不是输入名称验证输入吗？
不要使用method="get"，将其更改为<form name="myForm" ng-submit="submit()">，然后从控制器调用您的后端：$scope.submit = function(){ $http.post("some_url.php", data).then(...) }并将其接收为：$data = json_decode(file_get_contents("php://input"));而不是$_GET
实际上这用于过滤功能，所以我需要通过 url 传递多个项目，并且表单是通过 php 提交的，因此 angular js 仅用于此处的验证。不是一个有效的数字！这个
然后试着把myForm.item[priceFrom].$error.pattern写成myForm['item[priceFrom]'].$error.pattern

标签： javascript angularjs validation

【解决方案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>

【讨论】：