个人中心
gpt4 book ai didi

angularjs - 使用索引位置验证字段

转载 作者：行者123 更新时间：2023-12-04 03:01:52 25 4
gpt4 key购买 nike

我有几个想要动态复制的字段。我正在使用正在完成这项工作的 ng-reapt。但是，验证消息不起作用。这是我得到的:

<html ng-app="app">
    <head>
        <title>teste</title>
    </head>
    <body ng-controller='testController'>
        <label>Number of Workers</label>
        <select ng-model="quantity" ng-change="changed()">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <form name='frm' action='/workers/add' method='POST'>
            <div ng-repeat="i in numberOfWorkers track by $index">{{$index + 1}}
                <div>
                    <label>First Name</label>
                    <input class="fullSize" letters-only placeholder="Please enter your name" type="text" name="firstName" ng-model="workers[$index].firstName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
                    <span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.firstName)">
                        <small class="error" ng-show="frm.firstName[{{$index}}].$error.required">* Please enter your name.</small>
                        <small class="error" ng-show="frm.firstName[{{$index}}].$error.minlength">* At least 3 chars.</small>
                        <small class="error" ng-show="frm.firstName[{{$index}}].$error.maxlength">* No more than 50 chars.</small>
                    </span>
                </div>
                <div>
                    <label>Surname</label>
                    <input class="fullSize" letters-only placeholder="Please enter your surname" type="text" name="surName" ng-model="workers[$index].surName" ng-minlength="3" ng-maxlength="50" ng-required="true" maxlength="50">
                    <span ng-cloak class="error-container" ng-show="submitted || showErrors(frm.surName)">
                        <small class="error" ng-show="frm.surName[$index].$error.required">* Please enter your name.</small>
                        <small class="error" ng-show="frm.surName[$index].$error.minlength">* At least 3 chars.</small>
                        <small class="error" ng-show="frm.surName[$index].$error.maxlength">* No more than 50 chars.</small>
                    </span>                 
                </div>
                <div>
                    <label>Email</label>
                    <input class="grid-full" placeholder="Please enter your e-mail" type="email" name="email" ng-model="workers[$index].email" ng-minlength="3" ng-maxlength="50" required maxlength="50">
                    <span class="error-container" ng-show="submitted || showErrors(frm.email)">
                        <small class="error" ng-show="frm.email[$index].$error.required">* Please enter your E-mail.</small>
                        <small class="error" ng-show="frm.email[$index].$error.email">* Invalid email.</small>
                    </span>
                </div>

            </div>
        </form>

        <button ng-click="test()">test</button>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("app",[]);
            app.controller('testController',['$scope', function($scope){

                $scope.quantity = 1;
                $scope.submitted = false;
                $scope.numberOfWorkers = [1];
                $scope.workers = [];

                $scope.getNumber = function (num) {
                    return new Array(num);
                };

                $scope.test = function(){

                    console.log($scope.workers);
                };

                $scope.changed = function() {
                  $scope.workers = [];
                  $scope.numberOfWorkers = new Array(parseInt($scope.quantity));
                }


                $scope.isUndefined = function (thing) {
                    var thingIsUndefined = (typeof thing === "undefined");

                    return thingIsUndefined;
                };

                $scope.showErrors = function (field) {
                    var fieldIsUndefined = $scope.isUndefined(field);

                    if (fieldIsUndefined == false)
                    {
                        var stateInvalidIsUndefined = $scope.isUndefined(field.$invalid);
                        var stateDirtyIsUndefined = $scope.isUndefined(field.$dirty);

                        return (fieldIsUndefined == false && stateInvalidIsUndefined == false && stateDirtyIsUndefined == false &&
                            (field.$invalid && field.$dirty));
                    }
                    return false;
                };

            }]);
        </script>
    </body>
</html>

有没有办法使用索引位置显示和验证字段？

frm.firstName.$error.minlength

上面的代码适用于第一个 block ，但它会向所有副本显示消息。

最佳答案

我认为这与您想要实现的目标一致:

http://plnkr.co/edit/HVwnRfvt30WrsteY6DvW

我们需要为每个输入字段分配一个动态的name，通过使用ngRepeat的$index:

<form name="form">
    <div ng-repeat="entry in array track by $index">
        <input type="text" name="someField{{$index}}">
    <div>
</form>

并且根据 array 中的条目数，我们可以使用以下语法在循环中访问每个动态创建的 someField:

form['someField' + $index]

在你的情况下，假设我们有三个 worker ，第二个 worker 的 firstName 无效——在 ngRepeat 中，它看起来像这样:

  <div ng-repeat="i in numberOfWorkers track by $index">
    isValid? --> form.firstName{{$index}}.$valid = {{form['firstName' + $index].$valid}}
  </div>

输出:

isValid? --> form.firstName0.$valid = true
isValid? --> form.firstName1.$valid = false
isValid? --> form.firstName2.$valid = true

关于angularjs - 使用索引位置验证字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33974247/

25 4 0
文章推荐： ace-editor - 根据浏览器的大小调整 ajax.org ACE 编辑器的大小
文章推荐： scala - Scala 的类型删除如何用于更高种类的类型参数？
文章推荐： apache-spark - Pyspark 申请 foreach
文章推荐： ruby-on-rails - 如何在Rails中建立多对多关系
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com