Question

在角度js中是否有办法将管理器（或任何项目）列表推送到具有角度验证的数组。我基本上想要创建一个数组作为ng模型，并仍然验证它。这是可能的，还是我错误的方式？

    var app = angular.module("FormTest",[]);
    app.controller("AppCtrl",  ["$scope", function($scope){

        var appCtrl = this;
        appCtrl.appName = "Form Array";
        $scope.managers = [""];
        $scope.form = {};
        $scope.form.managers = $scope.managers;

        $scope.addManager = function(){

            $scope.managers.push('');
        }

        $scope.removeManager = function(index){

            if($scope.managers.length > 1){

                $scope.managers.splice(index, 1);

            }
        }

    }])

    angular.element(document).ready(function(){
        angular.bootstrap(document.querySelector('html'), ["FormTest"]);
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div ng-controller="AppCtrl as app">
        <h2>{{app.appName}}</h2>
        <div>
            {{form.managers}}
            <div>
                <div>{{managers}}</div>
                <div class="btn btn-primary" ng-click="addManager()">add manager</div>
            </div>
        </div>
        <form novalidate name="form">
            <div class="form-group" ng-repeat="item in managers track by $index">
                <div class="row-fluid">
                    <div class="col-md-5">
                        <input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
                    </div>
                    <div class="col-md-1">
                        <div class="btn btn-default">
                            <span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>

Answer 1

在你的例子中，好吧，除了正则表达式之外。

查看示例代码jsfiddle。

<h2>{{app.appName}}</h2>
<div>
  {{form.managers}}
  <div>
    <div>{{managers}}</div>
    <button class="btn btn-primary" ng-click="addManager()">add manager</button>
  </div>
</div>
<form novalidate name="form">
  Form valid={{form.$valid|json}}
  <div class="form-group" ng-repeat="item in managers track by $index">
    <div class="row-fluid">
      <div class="col-md-5">
        <input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
        {{form['manager'+$index].$error}}
      </div>
      <div class="col-md-1">
        <div class="btn btn-default">
          <button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
        </div>
      </div>
    </div>
  </div>

</form>

Angular表单输入到具有Validation的数组

1 个答案: